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

}); 

Answer 2

您需要seperately处理每一个元素：

$('.toggle').on('toggle', function (e, active) { 
    $.each($('.toggle'), function(index, element) { 
     if(element.hasClass('off')){ 
      $('.toggle').removeClass('off'); 
      $('.toggle').addClass('on');   
     } 
     if(element.hasClass('on')){ 
      $('.toggle').removeClass('on'); 
      $('.toggle').addClass('off');   
     } 
    }); 
});