使用UI反馈在多个元素上切换类
Toggle class on Multiple Elements with UI Feedback
我有一个列表(空格只是为了方便视觉):
<li class="a"> A </li>
<li class="b"> B </li>
<li class="c"> C </li>
<li class="a b"> A B </li>
<li class="a c"> A C </li>
<li class="b c"> B C </li>
<li class="a b c"> A B C </li>
我有一系列的"控件":
<a class="show-a" href="#">A</a>
<a class="show-b" href="#">B</a>
<a class="show-c" href="#">C</a>
<a class="show-all active" href="#">ALL</a>
我有一些CSS:
li {color: red; }
.deactivate {color: #ddd; }
a {color: #ddd; }
.active {color: blue; }
我想做两件事:
当单击相应的
<a>
控件时,在相应的<li>
上添加/删除.deactivate
类,例如单击.show-a
,将.deactivate
应用于所有没有.a
类的元素。并且,因此,从任何不再需要它的<li>
中删除.deactivate
类。反映控件中的当前选择。即添加/删除
.active
类到各自的锚链接。(这是我永远找不到答案的部分)。
注意:
- 在任何给定时间只能有一个控件为
.active
。像单选按钮一样,但是可以通过CSS样式化。 - 似乎更好的解决方案使用jQuery和toggleClass。
RE其他答案:有很多(例如http://jsfiddle.net/Cx4uK/2/)但是
- 没有地址#2
- 大多数显示/隐藏而不是切换类
- 很少有解释,所以很难迭代答案并理解它们是如何工作的(这是我的最终目标)。
此解决方案使用data-selector
属性来保存与特定链接相关的项的选择器。它有助于使JS真正干净。
对于活动链接,我们只需从所有链接中删除.active
,并将其添加到刚刚点击的链接中。
jsFiddle
JS
$(document).ready(function () {
$('.links a').click(function () {
// Remove .active from all links then add to the clicked one
$('.links a').removeClass('active');
$(this).addClass('active');
// Remove .active from all lis then use the attribute data-selector to set
// the relevant items
$('.letters li').removeClass('active');
$(this.getAttribute('data-selector')).addClass('active');
});
});