带有切换/删除类之谜的 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 次 :)

Answer 2

这是因为第一个 div 在调用 $('.off').click 时具有“on”类。所以，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;
}

---

由于已经讨论过哪种答案更快或更有效，我想我会进行性能测试。缓存 vs 兄弟 vs 非缓存。

See jsPerf test results

See jsPerf revision test results