2

快速概览：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。

简而言之：寻找一种方法使其仅在它需要工作的列中工作，以及将列表项移回的修复程序。

4

1 回答 1

2

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

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

和

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

这会从单击的 li 向上搜索并找到最近的 div 元素与类 .column 并在那里进行追加。

于 2012-10-08T14:00:33.503 回答