Question

快速概述：4列，每列都有自己的ul.category，包含所有可用的类别，ul.filter，这是ul.category中每个列表项应该去的地方。所有这些都应该留在那一栏内。

jquery

$("ul.category li.unselected").click(function() {
    $(this).removeClass("unselected").addClass("selected");
    $("ul.filter").append(this);
});
$("ul.filter li.selected").click(function() {
    $(this).removeClass("selected").addClass("unselected");
    $("ul.category").append(this);
});

而html，这只是一个专栏，但还有3个专栏。

<div class="column themes">
    <ul class="filter">
        <!-- here go the clicked list-items -->
    </ul>
    <ul class="category">
        <li class="unselected"></li>
        <li class="unselected"></li>
        <li class="unselected"></li>
    </ul>
</div>

那么，这对正确的作用是，它将点击的列表项上的类更改为.selected并成功地使css按预期更改。什么是错误，而不是将我单击的列表项添加到同一列中的ul.filter，而是将该列表项添加到每列的ul.filter中（基本上是重复的）它）。此外，单击ul.filter中的列表项不会将类更改回.unselected，也不会将其移回ul.category。

简而言之：寻找一种方法，使其能够在需要使用的列中完成，并修复将列表项移回。

Answer 1

它会将项目附加到所有列，因为您没有选择要附加到的特定列。更改附加到这些代码的2行代码......

$(this).closest("div.column").find("ul.filter").append(this);

和

$(this).closest("div.column").find("ul.category").append(this);

从点击的li向上搜索并找到带有.column类的最近的div元素，并将其追加到那里。

在2个列表之间移动列表项

1 个答案: