數組jquery的文本框旁邊的消息

Question

我正在針對數據庫驗證在文本框中輸入的值，並希望顯示正確或錯誤的圖標正確的文本框。

這是我的html代碼

<tr>
 <td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 
<tr>
<td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 
<tr>
<td><input type="textbox" class="process-order serial" name="serialNumber" id="serialNumber"/> <span name="validsn" id="validsn">
</td>
</tr> 

當在serialNumber字段中輸入值時，我正在驗證onblur，我會得到true或false，並且在jquery中我正在這樣做。

$.post("validateSN", {value:$(this).val()},function(data){
    $("#validsn").text(data);
});

每當我顯示數據時，錯誤消息或成功消息僅出現在第一個消息旁邊。

更新： SerialNumber文本框是動態的，並且與每個文本框大小的范圍相同。

有人可以幫助我糾正在每個文本框旁邊正確顯示錯誤/成功消息的方法。

Answer 1

這是因為您添加了

<span name="validsn" id="validsn">

靠近第一個輸入文本（然后重復使用相同的ID）

你應該這樣做

<span name="validsn" id="validsn1">
<span name="validsn" id="validsn2">
<span name="validsn" id="validsn3">

然后在Java腳本中

   var index = 1;
   for (index = 1 ; index <= 3;index++){ $("#validsn"+index).text(data);}

Answer 2

我遵循了Jigar Joshi的建議並做了一些修改

昂布爾

$(".serial").live("blur", function(){
//got the index of textbox where serial number is entered
var index = $(".serial").index(this);

$.ajax({
 url:"validateSN",
 data: "value="+sn,
 success : function(data){
 $("#validsn"+index).show();
     if(data=="true"){
    $("#validsn"+index).attr('src',"images/icons/valid_icon.png");
     } else if(data=="false"){
        $("#validsn"+index).attr("src", "images/icons/invalid_icon.png");
     }
});

然后效果很好。 謝謝Jigar Joshi幫助我前進。