Question

我使用纯CSS / jQuery创建了一个切换按钮，所有功能都完美无缺。当我复制并试图切换它时，问题就来了。按照惯例，切换开关切换＆＃39;与此同时，到目前为止，这是我的代码：

HTML

<div id="container">    
        <div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
        <div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
</div>

的jQuery

$(function(){
            $('.space').click(function(){
                if($('.circle').hasClass("detector")){
                    $('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
                } else {
                    $('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
                }
            });

            $('.space').eq(1).click(function(){
                if($('.circle').eq(1).hasClass("detector-1")){
                    $('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
                } else {
                    $('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
                }
            });
        });

或Jsfiddle：

http://jsfiddle.net/ew0s6nqd/

这就是它的工作原理，当你单击它检测到它有一个名为＆＃34;检测器＆＃34;的类的切换时。如果它没有，它会动画切换并创建一个。如果是这样，那意味着该类之前已创建，因此它会动画回切换切换并删除该类。

好的，当我复制切换时问题就出现了。我现在有两个我想单独激活的。最简单的解决方案是使用:eq() jQuery选择器或.eq() jQuery函数，人们将其归类为更正确的＆＃39;选项。

所以我将它添加到第二个切换的代码中，但它没有奏效。在上面的小提琴中，您可以自己测试它。如果有人知道哪个是问题，请告诉我，谢谢！

编辑：我已经使用了:eq()选择器，但它也没有用。

编辑2：我使用了一个名为＆＃34; detector-1＆＃34;以防止它干扰另一个。

Answer 1

$(function () {
    //the click function for every element with the .space class
    $('.space').click(function () {
        //check on the .circle child of the clicked .space using "this"
        if ($('.circle', this).hasClass("detector")) {
            //and animate it
            $('.circle', this).animate({
                marginLeft: "2px"
            }, "slow", function () {
                // since we are in the animate callback, "this" is now the 
                // .circle of the clicked .space
                // we want the lights to change - so we have to travel the dom upwards
                // 1st .parent() brings us to .space
                // 2nd .parent() leads us to .switch
                // siblings() let us find the .light-1 element
                $(this).parent().parent().siblings('.light-1').css("background", "#8e3135");
                // same here for light-2
                $(this).parent().parent().siblings('.light-2').css("background", "#adafb2");
                $(this).removeClass("detector");
            });
        } else {
            $('.circle', this).animate({
                marginLeft: "47px"
            }, "slow", function () {
                $(this).parent().parent().siblings('.light-1').css("background", "#adafb2");
                $(this).parent().parent().siblings('.light-2').css("background", "#8e3135");
                $(this).addClass("detector");
            });
        }
    });
});

使用此选择器，您只需要定义一次单击处理程序 - 它仍适用于无数个按钮...... "see working fiddle"

忘了提。我改变了你的小提琴中的CSS，因为背景图像没有显示出来，我通过CSS创建了一个白色圆圈...

Answer 2

由于@BhushanKawadkwar

，我想出了如何做到这一点

我必须在点击功能上使用:eq()选择器，在其他功能中使用.eq()功能。我不知道为什么，但它有效，这是工作小提琴：

http://jsfiddle.net/ew0s6nqd/2/

jQuery选择器eq :(）无法正常工作

2 个答案: