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

您需要单独处理每个元素：

"\ufeffsuccess"

Answer 2

尝试添加此行

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

});

JQuery toggler - 单击一个切换应该更新另一个

2 个答案: