問題描述

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。