Question

- 编辑 -

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

小提琴 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')...

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

1 个答案: