javascript - 条件 jQuery 切换函数

Question

我想根据列表项的属性类别隐藏和显示列表项。

问题是某些列表项有多个类。因此，如果我切换一个类别，然后切换另一个类别，则具有这两个选定类别的任何项目都将被删除。

我创建了我的问题的演示:http://jsfiddle.net/a4NkN/2/

这是 JS 代码:

$('#easy').click(function(){
    $(this).toggleClass( "checked" );
    $('.easy').toggle();
});

$('#fun').click(function(){
    $(this).toggleClass( "checked" );
    $('.fun').toggle();
});


$('#silly').click(function(){
    $(this).toggleClass( "checked" );
    $('.silly').toggle();
});

如果您选择“简单”和“有趣”按钮，划船将会消失。

我怎样才能让划船留下来？

Answer 1

这可能是一个很好的起点。尽管您可以更便宜、更清洁地做到这一点，但这给出了这个想法:

使用一个数组来保存选择按钮的状态，并使用一个对应的数组来保存类名称。每当您的选择按钮被单击时，您都会将所有元素设置为不可见，并再次重置那些可见的元素，这些元素已经被其他按钮选择或当前单击的元素全部保存在切换器数组中。

//saves whether button is active
var switcher = [false, false, false];
//holds your classes selectable
var classes = ['easy', 'fun', 'silly'];

$('.toggler').click(function () {
    // toogle the select button and save status
    var x = $(this).hasClass('checked');
    switcher[$(this).data('switch')] = !x;
    $(this).toggleClass("checked", !x);

    // iterate through your elements to set them active if needed 
    $('li').each(function () {
       var cur = $(this);
       cur.addClass('hidden');
       $.each(switcher, function (index, data) {
          if (data && cur.hasClass(classes[index])) {
             cur.removeClass('hidden');
          }
      });
   });
});

这个 fiddle 中的整个解决方案:http://jsfiddle.net/BMT4x/