0

- 编辑 -

我有左右滑动的切换按钮。切换和动画工作正常，但是在同一页面上添加多个切换按钮实例时会出现问题。当我单击切换按钮时，所有切换按钮都使用相同的 VAR。因此，如果您打开一个然后单击另一个，则第二个不会滑动打开，因为它认为应该关闭。您会将 isChecked 变量放在哪里，以便每个实例都不同？

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


});

radio-switch-slider 位于内容顶部并前后滑动显示是或否

<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');
    }
});
4

1 回答 1

2

我打赌你的.toggle-radio-switch元素是兄弟姐妹。.parent()从您的代码中删除。不需要它，因为.radio-switch-slider它直接包含在.toggle-radio-switch

$(this).find('.radio-switch-slider')...
于 2013-10-28T19:45:09.423 回答