javascript - jQuery切换器-单击一个切换器应更新另一个

我正在使用此https://github.com/simontabor/jquery-toggles插件来切换页面上的元素。

该插件只能在一项上正常工作。

$('.toggle').toggles({
    on: true,
    text:{
        on:'COMPLETE',
        off:'INCOMPLETE'
    }
});

$('.toggle').on('toggle', function (e, active) {
    if(active) {
        $(this).removeClass('off');
        $(this).addClass('on');
    } else {
        $(this).removeClass('on');
        $(this).addClass('off');
    }
});

但是我有2个相同的元素，一个在页面的顶部，一个在页面的底部。

我正在尝试同时更新两个（toggle）。我尝试仅针对该类，但这没有用：

$('.toggle').toggles({
    on: true,
    text:{
        on:'COMPLETE',
        off:'INCOMPLETE'
    }
});

$('.toggle').on('toggle', function (e, active) {
    if(active) {
        $('.toggle').removeClass('off');
        $('.toggle').addClass('on');
    } else {
        $('.toggle').removeClass('on');
        $('.toggle').addClass('off');
    }
});

有任何想法吗？

我试过使用每个，但效果不佳
http://giphy.com/gifs/3o85xxJ7f2fYakUzQs

最佳答案

尝试添加此行

$('.toggle').toggles(active);

像这样进入.on事件

$('.toggle').toggles({
    on: true,
    text:{
        on:'COMPLETE',
        off:'INCOMPLETE'
    }
});


$(".toggle").on("toggle", function(e, active) {

    $('.toggle').toggles(active);

    if(active) {
        $('.toggle').removeClass('off');
        $('.toggle').addClass('on');
    } else {
        $('.toggle').removeClass('on');
        $('.toggle').addClass('off');
    }

});

关于javascript - jQuery切换器-单击一个切换器应更新另一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30163598/