解决同一个标签只能显示一次提示信息的问题

问题描述

JQuery对同一个span标签要进行多次信息填写的时候，发现只能填一次，第二次要填时没有效果，先看一下问题截图：

当输入框失去焦点时，首先进行是否为空判断，结果能正常显示

但是第二次检查名字重复时，就显示不了提示信息。上面弹窗表示在数据库中已找到此姓名。如图：

下面是我写的代码：
1.Html页面

<div class="input-group col-sm-4 col-md-4">                                <span class="input-group-addon">&nbsp;&nbsp;姓名&nbsp;&nbsp;</span>                                <input id="addEpBillName" name="epName" type="text" class="form-control">                                <!--下面这个span是要信息显示的位置-->                                <span id="addEpBillName_Span"></span>                            </div>

2.js代码

//增加员工时，失去焦点事件    $("#addEpBillName").blur(function () {        var addEmpValue = $("#addEpBillName").val();        //先清空提示信息        $(this).next().html("");        if(addEmpValue!=""){            for(var p=0;p<empArray.length;p++){                if(addEmpValue==empArray[p].epName){                    $("#addEpBillName_Span").html("*员工姓名重复");                    return addEmployFlagName=false;                }else {                    addEmployFlagName=true;                }            }        }else{            $("#addEpBillName_Span").html("*员工姓名不能为空");           addEmployFlagName=false;        }    });

解决问题

我在span标签中是用id选择器，但是id具有唯一性，所以当前一个提示显示了后，第二个就会失效。解决办法：改为class选择器

$(".addEpBillName_Span").html("*员工姓名重复");$(".addEpBillName_Span").html("*员工姓名不能为空");在jsp界面中<span class="addEpBillName_Span"></span>

结果如图：
当填写重复姓名时

清空输入框，失去焦点时

success。
css选择器优先级:style>id>class。