1

我不是网络专家，但我需要有关使用 JQuery 的良好做法的帮助。

我的问题： 我有一张大桌子。每个项目都有一个按钮可以将其添加到页面的其他部分，因此我需要提取内容并将其设置为新元素。

我在 JSFiddle 上写了这段代码，但我不确定它是否是解决这个问题的正确方法（但它有效）。

我想到的其他选项是有一个带有我想要复制和处理文本的行号的 id，以通过例如 $('name-'+id) 获取值。这应该如下所示：

<tr id='row-1'>
    <td id='name-1' class='name'>First</td>
    <td id='lastname-1' class='lastname'>Brand</td>
    <td>
        <button id='btnTest-1' class='btnTest'>Add</button>
    </td>
</tr>

感谢您的意见或建议！

4

3 回答 3

1

您的代码运行正常，但我建议进行一些优化：

$(document).ready(function () {
    $('.btnTest').on('click',function (e) {
        e.preventDefault();
        var $parent = $(this).parent(),
            name = $parent.prevAll('.name').text(),
            lastname = $parent.prev().text(),
            obj = $('#names').append('<div><span>' + name + ' ' + lastname + '</span><button class="delName">Delete name</button></div>');

        obj.find('.delName').on('click',function (e) {
            e.preventDefault();
            $(this).parent().remove();
        });
    });
});

这个版本更好地利用了缓存，避免了 and 的双重声明.parent()，.children()因为.prev()and.find()方法会快得多。它还将您的变量声明合并到一个语句中，这将使您的缩小代码更小。

这是一个更新的 jsFiddle。

编辑

您还应该.text()改用 if .html()，修改了我的答案。

于 2013-10-25T15:23:30.553 回答
1

更改您的单击处理程序，使其使用事件委托和on()方法，因此它不断侦听添加到 DOM 的新元素

obj.on("click", '.delName', function (e) {
        e.preventDefault();
        $(this).parent().remove();
});

http://jsfiddle.net/Wk4Ut/2/

您只需要引用obj，事件就会监听.delname上的点击并冒泡到父级。无需使用 children().children()

于 2013-10-25T15:23:40.513 回答
1

永远不要使用增量id或class属性。它变成了维护的噩梦。

closest()您可以分别使用andfind()而不是链式parent()和children()调用来改进您获得的代码。此外，您可以为动态添加的按钮使用委托事件。尝试这个：

$(document).ready(function () {
    $('.btnTest').click(function (e) {
        e.preventDefault();
        var $tr = $(this).closest('tr');
        var name = $tr.find('.name').text();
        var lastname = $tr.find('.lastname').text();
        $('#names').append('<div><span>' + name + ' ' + lastname + '</span><button class="delName">Delete name</button></div>');
    });

    $('#names').on('click', '.delName', function (e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });
});

示例小提琴

于 2013-10-25T15:19:25.457 回答