特定要素の属性を判別しclass制御をしたい

Question

特定要素の属性を判別しclass制御をしたいです。

具体的ソースは以下の通りです。

<ul class="category-nav">
<li class="category-0">すべて</li>
<li class="category-1">カテゴリー1</li>
<li class="category-2">カテゴリー2</li>
<li class="category-3">カテゴリー3</li>
<li class="category-4">カテゴリー4</li>
</ul>

<ul class="item">
<li data-type="1">…</li>
<li data-type="2">…</li>
<li data-type="3">…</li>
<li data-type="4">…</li>
<li data-type="1">…</li>
<li data-type="2">…</li>
<li data-type="3">…</li>
<li data-type="4">…</li>
・
・
・
</ul>

「category-nav」を制御ナビとして特定のリストをクリックすると、「item」内リストのうち特定の「data-type」以外にクラス「hoge」を追加したいです。

具体的には以下のルールで「hoge」を追加したいです。
・「category-1」選択で「data-type」が「1」のリスト以外
・「category-2」選択で「data-type」が「2」のリスト以外
・「category-3」選択で「data-type」が「2」のリスト以外
・「category-4」選択で「data-type」が「2」のリスト以外
・「category-0」選択時には全てのクラスを削除

例：「category-1」選択時

<ul class="item">
<li data-type="1">…</li>
<li data-type="2" class="hoge">…</li>
<li data-type="3" class="hoge">…</li>
<li data-type="4" class="hoge">…</li>
<li data-type="1" class="hoge">…</li>
<li data-type="1">…</li>
<li data-type="2" class="hoge">…</li>
<li data-type="3" class="hoge">…</li>
<li data-type="4" class="hoge">…</li>
・
・
・
</ul>

また、選択中の「category-nav」のリストにはクラス「active」を追加したいです。

上記方法をご教授願えますでしょうか？
よろしくお願いいたします。

Answer 1

$("ul.category-nav li").on("click", function(e){
    // いったんactiveクラスを外す
    $("ul.category-nav li").removeClass("active");
    // クリックした要素にactiveクラスを追加
    $(this).addClass("active");
    // 対象の番号を取得
    var no = $(this).attr("class").split("-")[1];
    if(no == "0"){
        // 0ならクラス削除
        $("ul.item li").removeClass();
    } else {
        // 0以外なら対象となる要素にhogeクラスを追加
        $('ul.item li[data-type!="' + no + '"]').addClass("hoge");
    }
});

上記のようにしてみてはいかがでしょうか。
なお、こちらは動作未検証ですので、ご注意ください。

Comments

[castail]

ご回答ありがとうございます。

試したところ、.category-navのliのどれを選択しても全てにhogeがついてしまいます。

[yunn]

$(this).addClass("active"); の位置を no を取った後にずらして
$("ul.item li").removeClass(); → $("ul.item li").removeClass('hoge'); に修正した上で if より前にずらしてみてください。

似たような内容の質問をされていますが、そちらはあまり現実的なHTMLじゃないように思います。

[castail]

yunn様
ご回答ありがとうございます。
別質問にて当内容は解決しましたので、ご指摘の修正はまた次の機会に試したいと思います。