javascript jquery 列表项类切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17845285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery list item class toggle
提问by Arkady
I have a simple function to toggle list item class from "active" to "inactive". What is the most efficient way (i.e., using the least amount of code) to set all other list items to "inactive" so that there can only be one "active" list item? Please see below for an example. Thank you
我有一个简单的函数可以将列表项类从“活动”切换到“非活动”。将所有其他列表项设置为“非活动”以便只有一个“活动”列表项的最有效方法（即使用最少的代码）是什么？请参阅下面的示例。谢谢
<ul class="menu">
<li id="one" class="active">One</li>
<li id="two" class="inactive">Two</li>
<li id="three" class="inactive">Three</li>
<li id="four" class="inactive">Four</li>
<li id="five" class="inactive">Five</li>
</ul>
<script>
$('#one').click(function () {
if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive").addClass("active");
} else {
$(this).removeClass("active").addClass("inactive");
}
});
</script>
回答by Karl-André Gagnon
This can work:
这可以工作：
$('.menu li').click(function () {
$('.menu li').not(this).removeClass('active').addClass('inactive');
$(this).addClass('active').removeClass('inactive');
});
or
或者
$('.menu li').click(function () {
$('.menu li').removeClass('active').addClass('inactive');
$(this).toggleClass('active inactive');
});
The second method is shorter, but slower.
第二种方法更短，但更慢。
http://jsperf.com/toggle-vs-add-remove
http://jsperf.com/toggle-vs-add-remove
Edit:This one is shorter and faster:
编辑：这个更短更快：
$('.menu li').click(function () {
$('.menu li').not(this).removeClass('active');
$(this).addClass('active');
});
If performance is really a problem you can store your menu in a variable and perform operations on this variable, like:
如果性能确实是一个问题，您可以将菜单存储在一个变量中并对这个变量执行操作，例如：
var $menu = $('.menu li');
$menu.click(function () {
$menu.not(this).removeClass('active');
$(this).addClass('active');
});
回答by David says reinstate Monica
For brevity:
为简洁起见：
$('ul.menu li').click(function () {
$(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active');
});
JS Fiddle demo(127 characters, whitespace-removed character-count: 115).
JS Fiddle 演示（127 个字符，去除空格的字符数：115）。
Character-counts at JS Fiddle, since brevity was the intent, it seems.
JS Fiddle 的字符计数，因为简洁是意图，看起来。
Unfortunately, given the problem identified in the comments, below, a corrected implementation is somewhat more verbose than the (currently-accepted answer), alternatives being:
不幸的是，考虑到下面评论中发现的问题，更正后的实现比（当前接受的答案）更冗长，替代方案是：
$('ul.menu li').click(function () {
var t = this;
$(this).siblings().add(t).attr('class', function (){
return t === this ? 'active' : 'inactive';
});
});
JS Fiddle demo(174 characters, whitespace-removed character-count: 133).
JS Fiddle 演示（174 个字符，去除空格的字符数：133）。
Or:
或者：
$('ul.menu li').click(function () {
var t = this;
$(this).parent().children().attr('class', function (){
return t === this ? 'active' : 'inactive';
});
});
JS Fiddle demo(176 characters, whitespace-removed character-count: 135).
JS Fiddle 演示（176 个字符，去除空格的字符数：135）。
Of course, white space-removed jQuery does become somewhat unreadable, but still: I claim the, uh, moralvictory...
当然，删除了空格的 jQuery 确实变得有些不可读，但仍然：我声称，呃，道德上的胜利......
References:
参考：
回答by John Horstman
If you're already using jQuery UI, you can take advantage of the selectable function. That would get you what you want with the least amount of code. http://jqueryui.com/selectable/
如果您已经在使用 jQuery UI，则可以利用可选功能。用最少的代码就能得到你想要的东西。 http://jqueryui.com/selectable/
回答by Dan
回答by glautrou
If SEO is not important and to use the less amount of code I would say use a radio-button list. Then you can style and interact in JavaScript by using the ":checked" selector.
如果 SEO 不重要并且使用较少的代码，我会说使用单选按钮列表。然后你可以使用 ":checked" 选择器在 JavaScript 中设置样式和交互。
