-2

私はswitchy http://lou.github.io/switchy/を使用しており、animate-color.jsを使用しています

私は複数のページを持っていますが、それらのページとは異なり、1 つがトゥーグルになるたびにすべてが緑色に変わります。

$(function () {
    $('.binary').switchy();
    $('.binary').on('change', function () {
        // Animate Switchy Bar background color 7cb15b
        var bgColor = '#ebebeb';
        if ($(this).val() == '1') {
            bgColor = '#7cb15b';
        } else if ($(this).val() == '0;') {
            bgColor = '#ebebeb';
        }
        $('.switchy-bar').animate({
            backgroundColor: bgColor
        });
        // Display action in console
        var log = 'Selected value is "' + $(this).val() + '"';
        $('#console').html(log).hide().fadeIn();
    });
});

ここwww.niors.comで私が何を意味するかを見ることができます

4

2 に答える 2

0

変化する

$('.switchy-bar').animate({
    backgroundColor: bgColor
});

に

$(this).parent().find('.switchy-bar').animate({
    backgroundColor: bgColor
});

アイデアは、クリックまたは選択している要素に関連する1つのスイッチバーを変更することです...

于 2013-10-24T11:07:47.150 に答える
0

ここ：

$('.switchy-bar').animate({
    backgroundColor: bgColor
});

ドキュメントからすべてを取得switchy-barします。したがって、必要なコンテキストを見つける必要があります。つまり、次のようになります。

$(this).parent().find('.switchy-bar').animate({
    backgroundColor: bgColor
});

#(this)->選択

$(this).parent()-> ラッパー ( .field)

次に、変更された選択のスイッチバーを検索します。もちろん、パフォーマンスと可読性を向上させるために$(this)、コールバック関数の先頭で変数をキャッシュすることをお勧めします。

このようなもの：

$(function () {
    $('.binary').switchy();
    $('.binary').on('change', function () {
        var $select = $(this);
        var selectedValue = $select.val();

        // Animate Switchy Bar background color 7cb15b
        var bgColor = {
            '0': '#ebebeb',
            '1': '#7cb15b'
        };

        $select.parent().find('.switchy-bar').animate({
            backgroundColor: bgColor[ selectedValue ]
        });

        // Display action in console
        var log = 'Selected value is "' + selectedValue + '"';
        $('#console').html(log).hide().fadeIn();
    });
});
于 2013-10-24T11:15:02.823 に答える