jQuery selector eq :() не работает

Question

Я сделал кнопку переключения с чистым CSS/jQuery, и все работает отлично. Проблема возникает, когда я дублирую ее и пытаюсь переключить ее. Как предполагается, клеванты 'переключены' в то же время, вот мой код до сих пор:

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/

Так оно и работает, когда вы нажимаете переключатель, который определяет, имеет ли он класс «детектор». Если это не так, оно оживляет переключатель и создает его. Если это так, это означает, что класс был ранее создан, чтобы он анимировал назад переключатель и удалил класс.

Хорошо, проблема начинается, когда я дублирую переключатель. У меня есть два из них, которые я хочу активировать индивидуально. Самое простое решение - использовать селектор jQuery :eq() или функцию jQuery .eq(), которую люди классифицируют как более «правильную».

Поэтому я добавляю его в код второго переключателя, но он не работал. В скрипке выше вы можете проверить ее самостоятельно. Пожалуйста, если кто-то знает, какие проблемы, дайте мне знать, спасибо!

EDIT: Я уже использовал :eq() селектор, но он тоже не работал.

EDIT 2: Я использую другой класс детекторов, называемый детектором-1, чтобы он не мешал другому.

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/