驗證已經在分貝，具有多個輸入端同一個類

Question

我有（部分）由PHP循環產生一個形式的HTML：

<input type="text" class="store"> 
<input type="text" class="store"> 
<input type="text" class="store"> 
<input type="text" class="store"> 

的輸入變爲在DB表：

store 
------- 
cityID 
cityname 
store 

我有通知我如果走進店裏已經在其他城市的JavaScript：

$(document).ready(function() { 
    $('.store').on('change', function() { 
    var storeValue = $('.store').val(); 
    $.post('stores.php', {'word': storeValue}, function(data) { 
     var verifStore = ''; 
     var json = $.parseJSON(data); 
     $.each(json, function(k, v) { 
     verifStore += '[' + v.cityID + '] ' + v.cityName + '\n'; 
     }); 
     alert('Already in the following cities: ' + '\n' + verifStore); 
    }); 
    }); 
}); 

問題是，JavaScript是由解僱和我的表單中有更多.class輸入，所以（當然）它不能正常工作。我應該如何修改我的JavaScript代碼？也許在JavaScript中有一種方法分別考慮每個.class字段...類似.each或.foreach ...？

Answer 1

比方說，你被要求爲城市設置4個不同的值，而且他們不應該出現在數據庫中。現在

.error {border: 1px solid #f00; background: #f99;} 

而且，我會用$.each經過各input的：我會創建一個名爲error類

$(".store").each(function() { 
    $this = $(this); 
    $this.removeClass("error"); 
    $.post('stores.php', {'word': $this.val()}, function (data) { 
    if (/* Your condition if the word is present. */) 
     alert("Already there!"); 
    }); 
}); 

注意，該代碼將盡可能多的發送的請求到服務器。許多投入在那裏。所以要小心處理。

Answer 2

如果你只做一個請求，你可以優化你的功能。

var values = $(".store").map(function(){ 
return this.value; 
}); // values is an array 

$this.removeClass("error"); 
// stores.php should be ready to receive an array of values 
$.post('stores.php', {'word': JSON.stringify(values)}, function (data) { 
    var verifStore = ''; 
    var json = $.parseJSON(data); 
    $.each(json, function(k, v){ 
     verifStore += '[' + v.cityID + '] ' + v.cityName + '\n'; 
    }); 
    if(varifStore) 
      alert('Already in the following cities: ' + '\n' + verifStore); 
}); 

Answer 3

解決方案（至少對我來說...）

閱讀所有的答案和建議後，我就能夠使其與此代碼的工作。希望對其他人有所幫助:)

$(document).ready(function() { 
$('.store').each (function(){//do it for every class .store 
    var $this = $(this); //get this object 

    $this.on('change', function(){ //when this change... 
      var searchValue = this.value; //assign the input to a variable 
       if (searchValue != ''){ //if the variable is not emprty 
         $.post('stores.php',{'term' : searchValue}, function(data) { //check and return data in alert 

          if (data.length < 10){ // if number not in db, green 
           $this.css({'border' : 'solid 4px #17BC17'}); 
          } 

          var resultAlert = ''; 
          var jsonData = $.parseJSON(data); 
          $.each(jsonData, function(k, v){ 
           resultAlert += '[' + v.cityID + '] ' + v.cityname + ' ' + v.value + '\n'; 
          }); //each 

          alert('ALERT!' + '\n' + 'store in other cities' + '\n' + searchValue + ': ' + '\n' + resultAlert); 
          $this.css({'border' : 'solid 4px #FFCC11'}); // if in db, yellow 
         });// post 
       }//close if 

       if (searchValue == ''){ //if the variable is empty, this turn green, if you delete a yellow number 
        $this.css({'border' : ''}); 
       } 


    }); //close on change 
});//close .each 

}）;