0

- 編集 -

左右にスライドするトグルボタンがあります。トグルとアニメーションは正常に機能していますが、同じページにトグル ボタンのインスタンスを複数追加すると問題が発生します。トグル ボタンをクリックすると、すべてのトグル ボタンが同じ VAR を使用しています。そのため、1 つを開いてから別のものをクリックすると、2 つ目は閉じると思われるため、スライドして開きません。インスタンスごとに異なるように、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 はコンテンツの上に配置され、前後にスライドして yes または no を表示します

<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 に答える