Question

我正在使用switchy http://lou.github.io/switchy/并使用animate-color.js

我有不止一个，不像他们的页面，每次一个人到他们所有人变成绿色，我怎么能防止这个，所以只有到谷歌

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

Answer 1

更改

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

到

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

这个想法只是改变一个与您点击或选择的元素相关的交换条...

Answer 2

下面：

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

您从文档中获得所有switchy-bar。所以你需要找到你需要的背景，i.a。这样：

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

#(this) - ＆gt;选择

$(this).parent() - ＆gt;包装器（.field）

然后搜索更改选择的switchy栏。当然，为了获得更好的性能和可读性，在回调函数的开头将$(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();
    });
});

Jquery儿童div选择

2 个答案: