토글 버튼 - 하나를 클릭하여 모두 전환 토글 스위치

Question

- EDIT--

토글 버튼이 왼쪽과 오른쪽으로 슬라이드됩니다. 토글과 애니메이션은 정상적으로 작동하지만 같은 페이지에 두 개 이상의 토글 버튼 인스턴스를 추가 할 때 문제가 발생합니다. 토글 버튼을 클릭하면 모든 토글 버튼이 동일한 VAR을 사용하고 있습니다. 따라서 하나를 연 다음 다른 하나를 클릭하면 두 번째 슬라이드가 닫히지 않는다고 생각하기 때문에 슬라이드가 열리지 않습니다. isChecked var을 어디에 넣을 것인가? 각 인스턴스마다 다릅니 까?

JS 바이올린 http://jsfiddle.net/amQCN/11/

$(document).ready(function() { 


var isChecked = false; 
$('.toggle-radio-switch').click(function() { 
    if (isChecked == true) { 
     $(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150'); 
     isChecked = false; 
     console.log("isChecked = " + isChecked); 
    } else { 
     $(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150'); 
     isChecked = true; 
     console.log("isChecked = " + isChecked); 
    }; 
}); 


}); 

무선 스위치 슬라이더는 내용의 상단에 위치 앞뒤로 네 공개 슬라이드 또는 사람 넣다 더

<div class="toggle-radio-switch" id="toggle3"> 
    <span>yes</span> 
    <span>no</span> 
    <div class="radio-switch-slider"></div> 
</div> 

작업 버전이 궁금하지 않습니다 :

이 대신 사용하면 종료

$('.toggle-radio-switch').click(function() { 
    if ($(this).find('.radio-switch-slider').css('margin-left')=="0px"){ 
     $(this).find('.radio-switch-slider').animate({'margin-left': '34px'},'150'); 
    } else { 
     $(this).find('.radio-switch-slider').animate({'margin-left': '0px'},'150'); 
    } 
}); 

Answer 1

나는 .toggle-radio-switch 요소가 형제임을 배트하고 있습니다. 코드에서 .parent()을 제거하십시오. 그것은 .radio-switch-slider 때문에 필요하지 않습니다 내가 바이올린을 추가 .toggle-radio-switch

$(this).find('.radio-switch-slider')...