标签：Web cardno js alert 蓝桥 卡号 cardnolist password

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。