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

Question

我正在使用这个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').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

Answer 1

尝试添加这一行

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

});