JQuery toggler - Нажмите один переключатель, чтобы обновить еще один

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

Но у меня есть два одинаковых элемента: один сверху и один внизу.

Я пытаюсь одновременно обновить (переключить). Я попробовал только таргетинг на этот класс, но это не помогло:

$('.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 event like this

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

Вы должны обрабатывать каждый элемент отдельно:

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