其他分享
首页 > 其他分享> > 第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)

第十三届蓝桥杯(Web 应用开发)线上模拟赛【第八题】(实现卡号绑定功能)

作者:互联网

第十三届蓝桥杯(Web 应用开发)线上模拟赛参考答案全集

考试需求

补全 index.js 中空缺代码,实现用户输入完卡号与密码后,与 ajax 请求到的卡号数据进行比对,当卡号和密码匹配成功时,则提示绑卡成功,效果如下所示。(需要注意:控制提示信息显示与隐藏要求使用 Bootstrap 提供的 class fade 与 show , 无需重新编写 css 样式)

解决办法

先用ajax请求js目录下的cardnolist.json,再进行遍历比较,再用jQuery对元素样式进行改变(bootstrap的显示和隐藏)

参考代码

js/index.js

 function bind(cardno, password) {
    //Todo:补充代码
    $.ajax('./js/cardnolist.json').then(res=>{
        
        for (const item in res.cardnolist) {
            if (res.cardnolist.hasOwnProperty(item)) {
                const element = res.cardnolist[item];
                
                if (cardno === element.cardno && password === element.password) {
                    // 卡号密码正确
                    $("#tip2").attr('class', "alert alert-warning alert-dismissible fade");
                    $("#tip1").attr('class', "alert alert-primary alert-dismissible show");
                    return;
                }
            }
        }
        // 最终未能匹配
        $("#tip1").attr('class', "alert alert-primary alert-dismissible fade");
        $("#tip2").attr('class', "alert alert-warning alert-dismissible show");

    })

 
}
$(document).ready(function() {
    $("#btnsubmit").click(function() {
        //卡号
        let cardno = $("#exampleInputCardno").val();
        //密码
        let password = $("#exampleInputPassword").val();
        bind(cardno, password);
    });
});

标签:Web,cardno,js,alert,蓝桥,卡号,cardnolist,password
来源: https://blog.csdn.net/qq_16674623/article/details/122096817