如何在smarty loop或foreach項目之間添加jquery切換

Question

對於jquery Guru的外觀，我在嘗試。我試圖在smarty模板{foreach項目列表}之間添加一個jquery切換，我的代碼很好用，只是它在第一個列表項上起作用，當我點擊列表中的第二，第三個等項時，它不會切換。有什麼建議麼？

jQuery代碼

<script> 
$(function(){ 
$("#itm_add").each(function(){ 
    $(this).click(function(e){ 
     e.preventDefault(); 
     $("#itm_add_box").parent("tr").empty(); 
     href=$(this).attr("href"); 
     $(this).closest("tr").next("tr").empty().append('<td colspan="6"><div 
id="itm_add_box" data-href="'+href+'"> 
<input type="text" id="itm_serial" class="input" placeholder="Serial 
Number..." /> &nbsp; 
<input type="text" id="itm_qty" class="input" 
placeholder="Quantity..." /> &nbsp; 
<button class="green" id="itm_submit">Submit</button></div><td>'); 
     $("#itm_add_box button").click(function(e){ 
     e.preventDefault(); 
     href2=$(this).parent("#itm_add_box").attr("data-href"); 
     serial=$(this).parent().find("#itm_serial").val(); 
      qty=$(this).parent().find("#itm_qty").val(); 
      href2=href2+"&item_serial="+serial+"&item_quantity="+qty; 
      window.location=href2; 
     }); 
    }); 
}); 

}); 
</script> 

Smarty的模板：

<table> 
<tr> 
<td class="olohead" align="center" width="80">ID</td> 
    <td class="olohead" align="center">Type</td> 
    <td class="olohead" align="center">Name</td> 
    <td class="olohead" align="center">No</td> 
    <td class="olohead" align="center">Features</td> 
         </tr> 

{foreach from=$customer item=customer} 

<td class="olotd4" nowrap align="center">{$customer.ID}</td> 
<td class="olotd4" nowrap align="center">{$customer.TYPE}</td> 
    <td class="olotd4" nowrap >&nbsp;{$customer.NAME} </td> 
    <td class="olotd4" nowrap >&nbsp;{$customer.NO} </td> 
    <td class="olotd4" nowrap align="center"> 

<a id="itm_add">Add</a> 

</td>        
</tr> 

{/foreach} 
</table> 

還是那句話：這個工程，只是切換僅適用於列出的第一項。有什麼建議麼？

Answer 1

建議從循環中刪除id並將其設置爲類已在評論中。考慮到這一點，我試圖清理你的JS位：

$(function() { 
    $(".itm_add").click(function(e) { 
     e.preventDefault(); 
     $(this).parent("tr").empty(); 
     $(this).closest("tr").next("tr").empty().append(getTemplate($(this).attr("href"))); 
     $(this).find("button").click(function(e) { 
      e.preventDefault(); 
      var href = $(this).parent("#itm_add_box").attr("data-href"); 
      var serial = $(this).parent().find("#itm_serial").val(); 
      var qty = $(this).parent().find("#itm_qty").val(); 
      href += "&item_serial=" + serial + "&item_quantity=" + qty; 
      window.location = href; 
     }); 
    }); 
}); 



function getTemplate(href) { 
    return '<td colspan="6">' 
       + '<div id="itm_add_box" data-href="' + href + '" >' 
        + '<input type="text" id="itm_serial" class="input" placeholder="Serial Number..." /> &nbsp;' 
        + '<input type="text" id="itm_qty" class="input" placeholder="Quantity..." /> &nbsp;' 
        + '<button class="green" id="itm_submit">Submit</button>'+ 
       +'</div>' 
     + '<td>'; 
} 

注意，這個代碼不進行測試，所以有可能是有錯誤...

我改變什麼：

• 刪除了.each，因爲它不是必需的。 jQuery將自動將 添加到選擇器適用的所有元素上的事件處理程序。
• 在處理程序中使用$(this)，以使代碼僅適用於觸發事件的項目，而不是所有匹配的項目。
• 將html移動到一個單獨的函數，只是爲了保持一些可讀性。
• 通過在聲明前添加var關鍵字，使所有變量的功能範圍代替全局。

讓我知道是否有任何我錯過的錯誤，或者如果這是需要進一步解釋的任何錯誤。