javascript - jQuery子div选择

Question

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

我有不止一个，不像他们的页面，每次一个都变成了togle，它们都变成绿色，我怎么能防止这种情况，所以一个只有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
});

至

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

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

Answer 2

这里：

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