Javascript 如何在smarty循环或foreach项之间添加jquery切换

对于jquery大师，我正在尝试。我试图在smarty模板{foreach item list}之间添加一个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>

$（函数（）{
$（“#itm_添加”）。每个（函数（）{
$（此）。单击（函数（e）{
e、 预防默认值（）；
$（“#itm_添加框”）.parent（“tr”）.empty（）；
href=$（this.attr（“href”）；
$（this）.closest（“tr”）.next（“tr”）.empty（）.append（）
提交);；
$（“itm添加框按钮”）。单击（功能（e）{
e、 预防默认值（）；
href2=$（this.parent（“#itm_添加框”）.attr（“数据href”）；
serial=$（this.parent（）.find（#itm_serial”）.val（）；
数量=$（this.parent（）.find（#itm_数量”）.val（）；
href2=href2+“&item_serial=“+serial+”&item_quantity=“+quantity；
window.location=href2；
});
});
});
});

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>

身份证件
类型
名称
不
特征
{foreach from=$customer item=customer}
{$customer.ID}
{$customer.TYPE}
{$customer.NAME}
{$customer.NO}
添加
{/foreach}

---

再次说明：这是有效的，只是切换只对第一个列出的项目有效。有什么建议吗？

注释中已经提出了从循环中删除

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>';
}

$（函数（）{
$（“.itm_添加”）。单击（函数（e）{
e、 预防默认值（）；
$（this.parent（“tr”）.empty（）；
$（this）.closest（“tr”）.next（“tr”）.empty（）.append（getTemplate（$（this.attr（“href”）））；
$（此）。查找（“按钮”）。单击（函数（e）{
e、 预防默认值（）；
var href=$（this.parent（“#itm_添加框”）.attr（“数据href”）；
var serial=$（this.parent（）.find（“#itm_serial”）.val（）；
var qty=$（this.parent（）.find（“#itm_qty”）.val（）；
href+=“&item_serial=“+serial+”&item_quantity=“+quantity；
window.location=href；
});
});
});
函数getTemplate（href）{
返回“”
+ ''
+ '  '
+ '  '
+“提交”+
+'' 
+ '';
}

请注意，此代码未经测试，因此可能存在错误

我改变的是：

• 删除了

  。每个
  ，因为它不是必需的。jQuery将自动
  在选择器应用于的所有元素上添加事件处理程序
  在处理程序中使用
  $（this）
  ，使代码仅应用于触发事件的项，而不是所有匹配的项
  将html移到一个单独的函数中，只是为了使内容更具可读性
  通过在其声明前添加
  var
  关键字，使所有变量都成为作用域而不是全局变量
  

---

让我知道我是否遗漏了任何bug，或者这是否需要进一步解释。

id=“itm\u add”

在您的循环中。这将产生无效HTML的双id，并使您的JS行为怪异。用一个类代替！谢谢你，彼得。全班同学都做到了。这也打开了多行，如何只显示1，比如关闭旧实例{class}。有什么建议吗？嗨，彼得，谢谢你的时间和参与，我真的很感激。它工作得很好，只是它不会自动关闭旧类。当我单击每个项目时，它会显示输入，但我希望它在触发新类时删除旧类。还有其他建议吗？再次感谢：）嗨，彼得，我刚刚测试了代码，似乎有一些问题。它未提交，并在提交按钮后放置NaN