Question

我想隐藏和显示基于其属性类的列表项。

问题是某些列表项有多个类。因此，如果我切换一个类然后切换另一个类，则将删除包含所选类的任何项。

这是JS CODE：

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

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


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

如果您选择“简易”和“娱乐”按钮，则划船将消失。

我怎样才能让Boating留下来？

Answer 1

如果某个元素可以同时满足多个过滤器，则不能无条件地根据其中一个按钮过滤器的点击来切换元素。正确的方法更多一些。

由于您的checked类意味着只显示与该按钮对应的项目，请执行以下操作：根据按钮的当前状态切换它们。当且仅当相应按钮因点击而checked而显示时，才会显示这些项目。

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

此代码使用.toggle的最后一个版本，即接受布尔参数的版本。

它也可以更加简洁地完成：

$('.easy').toggle($(this).toggleClass( "checked" ).is(".checked"));

Answer 2

这可能是一个很好的起点。虽然你可以做到这个更便宜和更清洁，但这提出了这个想法：

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

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

这个小提琴中的整个解决方案：http://jsfiddle.net/BMT4x/

条件jQuery切换功能

2 个答案: