クリックでclassを追加したい

Question

特定要素をクリックすることで別要素にclassを追加したいです。

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

<ul class="category-nav">
<li class="category-a">すべて</li>
<li class="category-b">カテゴリーb</li>
<li class="category-c">カテゴリーc</li>
<li class="category-d">カテゴリーd</li>
<li class="category-e">カテゴリーe</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-b」選択で「data-type」が「1」のリスト以外
・「category-c」選択で「data-type」が「2」のリスト以外
・「category-d」選択で「data-type」が「3」のリスト以外
・「category-e」選択で「data-type」が「4」のリスト以外
・「category-a」選択時にはその時点で付与されている全ての「hoge」クラスを削除
※他のクラスが付いている場合もあるのであくまで「hoge」のみの削除です。

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

例：「category-b」選択時

<ul class="category-nav">
<li class="category-a">すべて</li>
<li class="category-b active">カテゴリーb</li>
<li class="category-c">カテゴリーc</li>
<li class="category-d">カテゴリーd</li>
<li class="category-e">カテゴリーe</li>
</ul>

<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>

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

Answer 1

$('.category-nav li.category-b').on('click',function(){$('.item li:not("[data-type=1]")').addClass('hoge');$('.category-nav li').removeClass('active');$(this).addClass('active');});
$('.category-nav li.category-c').on('click',function(){$('.item li:not("[data-type=2]")').addClass('hoge');$('.category-nav li').removeClass('active');$(this).addClass('active');});
$('.category-nav li.category-d').on('click',function(){$('.item li:not("[data-type=3]")').addClass('hoge');$('.category-nav li').removeClass('active');$(this).addClass('active');});
$('.category-nav li.category-e').on('click',function(){$('.item li:not("[data-type=4]")').addClass('hoge');$('.category-nav li').removeClass('active');$(this).addClass('active');});
$('.category-nav li.category-a').on('click',function(){$('.item li').removeClass('hoge');$('.category-nav li').removeClass('active');$(this).addClass('active');});

Comments

[castail]

ご回答ありがとうございます。ご教授いただいた内容で実現できました！感謝いたします。