切换按钮 - 单击一个和所有切换开关

Question

--EDIT--

I have the toggle Button with which slides left and right. The toggle and animation are working fine, but the problem comes when adding more than one instance of toggle button on the same page. When I click on a toggle button, All the toggle buttons are using the same VAR. So if you open one and then click another one, the second one doesn't slide open because it thinks is suppose to close. Where would you put the isChecked var so that it is different for each instance?

js fiddle 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);
    };
});


});

radio-switch-slider is positioned on top of the contents and slides back and forth revealing yes or no

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

Working version incase anyone is wondering:

Ended up just using this instead

$('.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

I'm betting your .toggle-radio-switch elements are siblings. Remove .parent() from your code. It isn't needed since .radio-switch-slider is contained directly in .toggle-radio-switch

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