Jquery child div selection

Question

我正在使用切换 http://lou.github.io/switchy/，它使用动画颜色.js

我

有不止一个，不像他们的页面，每次有人得到 toogle 它们都变成绿色，我怎么能防止这种情况，所以一个人只会得到 toogle

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

您可以从文档中获取所有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();
    });
});

Answer 2

更改

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

自

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

这个想法是只更改一个与您正在单击或选择的元素相关的开关栏......