2

簡単な概要: 4 つの列、各列には、利用可能なすべてのカテゴリを含む独自の ul.category と、ul.category 内のすべてのリスト項目が移動する場所である ul.filter があります。これらはすべて、その列内にとどまる必要があります。

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 は、これは 1 つの列にすぎませんが、このような列が 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 から上方向に検索を行い、クラス .column を持つ最も近い div 要素を見つけて、そこに追加します。

于 2012-10-08T14:00:33.503 に答える