Question

对于jquery Guru来说，我正在努力。我试图在smarty模板{foreach item list}之间添加一个jquery切换，我的代码非常适用于它在第一个列表项上工作，当我点击列表中的第2个，第3个等项时它不会切换。有什么建议吗？

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关键字，使所有变量功能范围代替全局变量。

如果我遗漏了任何错误，或者这是否需要进一步解释，请告诉我。

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

1 个答案: