特定要素の属性を判別しclass制御をしたいです。
具体的ソースは以下の通りです。
lang
1<ul class="category-nav"> 2<li class="category-0">すべて</li> 3<li class="category-1">カテゴリー1</li> 4<li class="category-2">カテゴリー2</li> 5<li class="category-3">カテゴリー3</li> 6<li class="category-4">カテゴリー4</li> 7</ul> 8 9<ul class="item"> 10<li data-type="1">…</li> 11<li data-type="2">…</li> 12<li data-type="3">…</li> 13<li data-type="4">…</li> 14<li data-type="1">…</li> 15<li data-type="2">…</li> 16<li data-type="3">…</li> 17<li data-type="4">…</li> 18・ 19・ 20・ 21</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」選択時
lang
1<ul class="item"> 2<li data-type="1">…</li> 3<li data-type="2" class="hoge">…</li> 4<li data-type="3" class="hoge">…</li> 5<li data-type="4" class="hoge">…</li> 6<li data-type="1" class="hoge">…</li> 7<li data-type="1">…</li> 8<li data-type="2" class="hoge">…</li> 9<li data-type="3" class="hoge">…</li> 10<li data-type="4" class="hoge">…</li> 11・ 12・ 13・ 14</ul>
また、選択中の「category-nav」のリストにはクラス「active」を追加したいです。
上記方法をご教授願えますでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/20 06:08
2015/10/21 02:26
2015/10/21 07:33