Как «переключить все», а также переключить определенные классы элементов?

Question

Я хочу переключить видимость классов элементов списка, а также переключить видимость всех элементов списка. С помощью another stack overflow post я могу переключать определенные классы элементов списка.

Вот Javascript У меня есть, что переключает определенные классы из элементов списка:

var switcher = [false, false, false]; 
var classes = ['easy', 'fun', 'silly']; 

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked", !x); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 
}); 

Я добавил основные функциональные возможности, чтобы скрыть и показать все элементы списка, но функция тормоза отдельных переключает класс:

$('.select_all').click(function() { 
    $(".toggler").toggleClass("checked"); 
    $('li').toggleClass("hidden"); 
}); 

Как я могу сохранить классные кнопки и добавить еще одну кнопку, которая переключает все элементы?

Вот скрипка пример: http://jsfiddle.net/BMT4x/1/

Answer 1

Я не уверен, если это именно то, что вы пытаетесь сделать, но это должно дать вам толчок в правильном направлении (по крайней мере, направление я идти). Я предпочитаю переключать все на классы. Что-то вроде:

<button class="toggler" data-class="easy">Easy</button>, 
<button class="toggler" data-class="fun">Fun</button>, 
<button class="toggler" data-class="silly">Silly</button>, 
<button class="toggler" data-class="all">Select All</button> 


<ul id="list"> 
    <li class="easy">Bowling</li> 
    <li class="fun">Balooning</li> 
    <li class="fun easy">Boating</li> 
    <li class="silly">Barfing</li> 
    <li class="easy fun">Bafooning</li> 
</ul> 

CSS:

#list li { 
    display: none; 
} 
#list.easy li.easy { 
    display: block; 
} 
#list.fun li.fun { 
    display: block; 
} 
#list.silly li.silly { 
    display: block; 
} 
#list.all li { 
    display: block; 
} 

JS:

$('.toggler').click(function() { 
    var category = $(this).data('class'); 
    $('#list').toggleClass(category); 
}); 

И скрипку для справки: http://jsfiddle.net/qLLYj/

Answer 2

Вы можете явно добавлять/удалять класс, минуя секунду, switch, параметр toggleClass(see here).

Таким образом, вы можете изменить состояние всех отдельных переключателей и элементов списка при нажатии кнопки .select_all.

$('.select_all').click(function() { 
    $('.select_all').toggleClass("checked"); 
    var allChecked = $('.select_all').hasClass("checked"); 
    switcher = [allChecked, allChecked, allChecked]; 
    $(".toggler").toggleClass("checked", allChecked); 
    $('li').toggleClass("hidden", !allChecked); 
}); 

Некоторые дополнительные изменения, чтобы получить более интуитивное поведение (например, если все проверено, щелкнув один из тумблеров отменяет .select_all, а также само по себе, проверяя все индивидуальные переключению означает .select_all автоматически проверяется):

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked"); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 

    var allChecked = switcher.indexOf(false) < 0; 
    $('.select_all').toggleClass("checked", allChecked); 
}); 

Fiddle: http://jsfiddle.net/ET33B/