jQuery单选按钮带有切换/删除类的神秘感

Question

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

我有三个div就像单选按钮一样。第一个div有“on”类，其他有class“off”。如果我单击“off”类，它将变为“on”，但这不适用于第一个div，因为我无法将其转回“on”。只有当他从一开始就“上课”时，它才有效。你能告诉我问题出在哪里吗？

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选择器将perf测试变成了公平的比较。似乎使用siblings()比迭代JQuery集合（在Chrome中）快一点，在其他浏览器上的速度大致相同，这很方便。

我的原始观点基本上是＆＃34;不要担心用户界面交互的速度，除非出现问题＆＃34;。无论如何我会使用上述技术，因为它更易于阅读/维护。你有多快点击鼠标？当然不是每秒90,000次：）

Answer 2

那是因为第一个div在调用$('.off').click时将类打开了。所以，jQuery没有将事件绑定到它。

您可以将事件绑定为：

$(".slider-radio-buttons").on('click', '.off', function() {
    $(".on").removeClass('on').toggleClass('off');
    $(this).toggleClass('on').removeClass('off');
});

请参阅小提琴：http://jsfiddle.net/UyKzf/5/

Answer 3

$(".off, .on").click(function() {
    if( $(this).hasClass('off'))
    {
        $(".on").toggleClass('on off');
        $(this).toggleClass('on off');       
    }

});

小提琴：http://jsfiddle.net/UyKzf/7/

为以后的观看者编辑：

[有用] 这个答案不是很好因为（参见TrueBlueAussie评论）

Answer 4

最简单的方法是将它们全部关掉，然后只需点击一下即可点击它。

See working jsFiddle demo

---

HTML

<div class="slider-radio-buttons">
    <div class="on">Choice 1</div>
    <div class="off">Choice 2</div>
    <div class="off">Choice 3</div>
</div>

---

的jQuery

var $buttons = $("div.slider-radio-buttons div");

$buttons.on("click", function () 
{
    $buttons.removeClass("on").addClass("off");
    $(this).removeClass("off").addClass("on");
});

---

CSS

.off 
{
    opacity: 0.7;
    background: #FFE3B3;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.off:hover 
{
    opacity: 1;
}
.on 
{
    background: #FFA200;
}

---

由于讨论了什么答案更快或更有效，我以为我会进行性能测试。 Cached vs Siblings vs Non-Cached。

See jsPerf test results

See jsPerf revision test results