Question

我拼凑了一个列表，您可以将一个项目从左列移动到右侧，反之亦然。这也支持手风琴切换。

$('.list-arrows button').unbind().click(function () {
    var $button = $(this), actives = '';
    if ($button.hasClass('move-left')) {
        actives = $('.list-right ul li.active');
        actives.clone(true, true).removeClass('active').appendTo('.list-left ul');
        actives.remove();
    } else if ($button.hasClass('move-right')) {
        actives = $('.list-left ul li.active');
        actives.clone(true, true).removeClass('active').appendTo('.list-right ul');
        actives.remove();
    }
});

当我将项目1从A列移动到B列时，项目1被克隆并添加到A列的其他列表项目中。不确定为什么会发生这种情况，但我怀疑它与.appendTo（'。list-left ul'）有关;不够具体。

所以我在列表项中添加了一个迭代循环，以便尝试将克隆包含在每个特定的一个中，但我认为我的方向错误。

有没有办法能够将每个项目移动到任一列，但是阻止项目本身在每个其他列中重复？

Answer 1

此行为是由于在将移动的项目附加到<ul>元素时您的选择器过于宽泛。在您的代码中，这些是两个相关的行：

actives.clone(true, true).removeClass('active').appendTo('.list-left ul'); 
// [...]
actives.clone(true, true).removeClass('active').appendTo('.list-right ul');

appendTo()中的选择器将匹配 <ul>和.list-right的所有 .list-left的，包括<ul>这些列表中已存在的项目的元素。因此，移动的项目也将添加到这些项目下。

要解决此问题，您可以指定只想将项目添加到遇到的第一个<ul>，就像您当前的HTML结构是正确的列表一样。所以这两行成为：

actives.clone(true, true).removeClass('active').appendTo('.list-left ul:eq(0)'); // and actives.clone(true, true).removeClass('active').appendTo('.list-right ul:eq(0)');

此处有一个JSFiddle并已应用此修复程序。

希望这有帮助！如果您有任何问题，请告诉我。

列出移动到新列时重复的项目

1 个答案: