Question

我需要在点击时将项目从一个列表添加到另一个列表。这是fiddle

想法是，在“添加”按钮上点击<li>Item</li>转到第一个位置的第二个列表，然后点击“{1}}点击第一个列表中的第一个列表。

我想要一个选项，我可以在按钮上多次单击并将项目从列表移动到列表。

Html：

<li>Item</li>

Jquery :(我的知识很少）

<ul id="listOne">
    <li>Item 1 <button type="submit" id="add">Add</button></li>
    <li>Item 2 <button type="submit" id="add">Add</button></li>
    <li>Item 3 <button type="submit" id="add">Add</button></li>
</ul>

<ul id="listTwo">
    <li>Item 4 <button type="submit" id="remove">Remove</button></li>
    <li>Item 5 <button type="submit" id="remove">Remove</button></li>
    <li>Item 6 <button type="submit" id="remove">Remove</button></li>
</ul>

Answer 1

您可以通过将li元素附加到当前不是其子代的ul来简化逻辑。您还可以通过读取要附加到的父列表上的数据属性来设置按钮的文本。最后请注意，在文档范围内重复相同的id是无效的，您应该使用类来对元素进行分组。试试这个：

<ul id="listOne" class="list" data-button-text="Add">
    <li>Item 1
        <button type="button">Add</button>
    </li>
    <li>Item 2
        <button type="button">Add</button>
    </li>
    <li>Item 3
        <button type="button">Add</button>
    </li>
</ul>

<ul id="listTwo" class="list" data-button-text="Remove">
    <li>Item 4
        <button type="button">Remove</button>
    </li>
    <li>Item 5
        <button type="button">Remove</button>
    </li>
    <li>Item 6
        <button type="button">Remove</button>
    </li>
</ul>

$('.list button').click(function() {
    var $list = $(this).closest('.list');
    var $targetList = $('.list').not($list)
    $(this).closest('li').appendTo($targetList);
    $(this).text($targetList.data('button-text'));
})

Example fiddle

请注意，此相同的事件处理程序适用于使用共享类的两个列表。

Answer 2

您有重复的ID无法使用。大多数浏览器只能看到ID的第一个实例，因为它们使用快速查找表，每个键只存储一个元素。改为使用类或寻找与"LI button"等匹配的其他模式

您可以更改它以将closest LI移至button点击。

使用委派事件意味着动态添加没有问题。他们在click事件`的祖先元素上听。

function moveItems(origin, dest) {
  $(origin).closest("li").appendTo(dest);
}
$(document).on('click', '.add', function () {
    moveItems(this, '#listTwo');
});

$(document).on('click', '.remove', function () {
    moveItems(this, '#listOne');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/r7j3odyy/4/

注意：您当前的逻辑只允许将项目从列表移动到另一个列表一次。如果您希望它能够将它们移回（使用适当的按钮文本），您将需要重做它。

你可以这样做：

function moveItems(origin, dest, text) {
  $(origin).text(text).closest("li").appendTo(dest);
}
$('#listOne').on('click', 'button', function () {
    moveItems(this, '#listTwo', 'Remove');
});

$('#listTwo').on('click', 'button', function () {
    moveItems(this, '#listOne', 'Add');
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/r7j3odyy/6/

此版本使用列表上的委派事件，这些事件与事件时单击的按钮相匹配。代码总是提供新的按钮文本（虽然有很多方法可以做到这一点）。

在列表中添加和删除项目以列出jquery

2 个答案: