第十三届蓝桥杯（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);
    });
});