带有切换/删除类之谜的 jQuery 单选按钮

Question

jQuery 有问题，但我不知道为什么。

我有三个像单选按钮一样的 div。第一个 div 的类为“on”，其他 div 的类为“off”。如果我单击“关闭”类，它会更改为“打开”，但这不适用于第一个 div，因为我无法将其恢复为“打开”。只有当他从一开始就“停课”时，这才有效。你能告诉我问题出在哪里吗？

HTML:

<div class="slider-radio-buttons">
                    <div class="on"></div>
                    <div class="off"></div>
                    <div class="off"></div>
                </div>

jQuery:

$(".off").click(function() {
    $(".on").removeClass('on').toggleClass('off');
    $(this).toggleClass('on').removeClass('off');
});

http://jsfiddle.net/UyKzf/2/

Answer 1

由于已经有一些关于代码优化的(冗长的)讨论(仅在用户界面速度下使用)，我反对建议比以下更快和更简单:

http://jsfiddle.net/TGc7L/2/

$("div.slider-radio-buttons div").on("click", function () 
{
    $(this).removeClass("off").addClass("on").siblings().removeClass("on").addClass("off");
});

选择器仅使用一次。所有其他访问要么是对已知目标元素(使用 $(this))，要么是该元素的同级元素，(我相信)可以使用 siblings()< 更快地访问该元素。

http://jsperf.com/cached-vs-siblings/3

*注:由于对统计数据一直持怀疑态度，我通过排除初始 jQuery 选择器将性能测试变成了公平的比较。看来使用 siblings() 比迭代 JQuery 集合(在 Chrome 中)要快一点，并且在其他浏览器上的速度大约相同，这一点很容易知道。

我最初的观点基本上是“不要担心用户界面交互的速度，除非出现问题”。无论如何我都会使用上述技术，因为它更易于阅读/维护。您点击鼠标的速度有多快？当然不是每秒 90,000 次:)