JQuery AJAX使用VALUE作爲鍵/ ID

Question

我想知道如何得到像id值那樣我可以做這樣的事情，我有2個字段和div（狀態）。

<input name="item_1" type="hidden" value="1" /> 
<input type="text" name="date_1" id="dateselect" onchange="check();" /> 
<div id="status_1">Click on the field above!</div> 

<input name="item_2" type="hidden" value="2" /> 
<input type="text" name="date_2" id="dateselect" onchange="check();" /> 
<div id="status_2">Click on the field above!</div> 

在隱藏字段中的值將是item_x的喜歡和date_x等就是2臺場，並會有很多更相同數量的！用PHP編寫（foreach項目）。

所以我需要將這些字段的值傳遞給ajax請求。

date = $("[name='date']").val(); 
item = $("[name='item']").val(); 
elm = "#status"; 

我該如何獲得「1」或「2」作爲一個變種名爲id，所以我可以做類似

date = $("[name='date_"+id+"']").val(); 
item = $("[name='item_"+id+"']").val(); or item = id; 
elm = "#status_"+id; 

由於將有多個這些小棋子，做相同但不是在同一時間，只有點擊時。當只有1個時，我可以很容易地做到這一點，但當有更多的時候，我會稍微卡住。

我的繼承人它做一次版本，我需要一些如何設置id，所以它不再是不確定的：

function check(id,elm) { 
book = $("[name='date']").val(); 
var item = ''; 
if(id === undefined){ 
item = $("[name='item']").val(); 
}else{ 
item = id; 
} 
if(elm === undefined){ 
elm = "#status"; 
} 
if(book.length >= 3 && item.length >= 0) { 
$(elm).html('<img align="middle" src="images/loading.gif" alt="Checking" /> Checking availability...'); 
$.ajax({type: "POST",url: "checker.php",data: "date="+book+"&itemid="+item,success: function(msg){ 
$(elm).ajaxComplete(function(event, request, settings){ 
if(msg == 'OK') { 
$(elm).html(' <img align="middle" src="images/tick.png" alt="Available" /> Available!'); 
$(elm).next().val(1); 
} else { 
$(elm).html(msg); 
$(elm).next().val(0);} 
}); 
}}); 
} else { 
$(elm).html(''); 
} 
} 

感謝所有幫助

Answer 1

上你的標記基於不onchange事件

<input name="item_1" type="hidden" value="1" /> 
<input type="text" name="date_1" id="dateselect" /> 
<div id="status_1">Click on the field above!</div> 

<input name="item_2" type="hidden" value="2" /> 
<input type="text" name="date_2" id="dateselect" /> 
<div id="status_2">Click on the field above!</div> 

你可以讓jQuery的做事件佈線，對於初學者來說，並使用合適的事件（onkeypress或onblur將是最好的，我認爲）

$(function(){ 
    // bind the onkeypress event to textboxes that start with 'date_' 
    $("input:text[name^='date_']").onkeypress(function(){ 
     var id = $(this).attr("name").split("_")[1]; 

     var $date = $(this); 
     var $item = $("[name='item_" + id + "']"); 
     var $status = $("#status_" + id); 

     if($date.val().length >= 3 && $item.length > 0) { 
      $status.html('<img align="middle" src="images/loading.gif" alt="Checking" /> Checking availability...'); 
      $.ajax({ 
       type: "POST", 
       url: "checker.php", 
       data: "date=" + $date.val() + "&itemid=" + $item.val(), 
       success: function(msg) { 
        if(msg == 'OK') { 
         $status.html('<img align="middle" src="images/tick.png" alt="Available" /> Available!'); 
         $item.val(1); 
        } else { 
         $status.html(msg); 
         $item.val(0); 
        } 
       } 
      }); 
     } 
     else { 
      $status.html(''); 
     } 
    }); 
}); 

Answer 2

你可以做這樣的事情，有一個與數據的數組：

<input name="item[]" type="hidden" value="1" /> 
<input type="text" name="date[]" id="dateselect" onchange="check();" /> 
<div id="status[]">Click on the field above!</div>