jQuery selector eq :() not working

Question

순수 CSS/jQuery로 토글 버튼을 만들었고 모든 것이 완벽하게 작동합니다. 문제는 내가 그것을 복제하고 그것을 토글하려고 할 때 온다.

<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

HTML :

가정으로, 토글 여기에 지금까지 내 코드이며, 동시에 '전환'

http://jsfiddle.net/ew0s6nqd/

"detector"라는 클래스가 있으면 감지하는 토글을 클릭하면 작동하는 방식입니다. 그렇지 않은 경우 토글을 애니메이션으로 만들고 토글을 만듭니다. 그렇다면 클래스가 이전에 만들어져 토글을 애니메이션으로 되돌리고 클래스를 제거한다는 의미입니다.

좋아, 토글을 복제 할 때 문제가 시작됩니다. 이제는 개별적으로 활성화하려는 두 가지 항목이 있습니다. 가장 쉬운 해결책은 :eq() jQuery 선택기 또는 .eq() jQuery 함수를 사용하여 더 정확한 '옵션'으로 분류하는 것입니다.

그래서 두 번째 토글 코드에 추가하지만 작동하지 않았습니다. 위의 바이올린에서 직접 테스트 할 수 있습니다. 제발 누가 문제인지 아는 사람이 있으면 알려주세요, 고마워요!

편집 : 이미 :eq() 선택기를 사용했지만 작동하지 않았습니다.

EDIT 2 : "detector-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

나는

내가 다른 사람의 클릭 기능에 :eq() 선택하고 .eq() 기능을 사용했다가 감사 @BhushanKawadkwar 할 수 있도록하는 방법을 알아 냈어. 내가 왜 모르겠지만, 작동, 여기에 작업 바이올린의 :

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