条件 jQuery 切换函数

Posted 2023-05-08

【中文标题】条件 jQuery 切换函数

【英文标题】：Conditional jQuery Toggle Function

【发布时间】：2014-02-11 17:13:01

【问题描述】：

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

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

我为我的问题创建了一个演示：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();
);

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

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

【参考方案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');
          
      );
   );
);

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

【讨论】：

使用您的解决方案的功能，是否有一种方法可以创建一个“全选”按钮，当单击该按钮时，将根据选择的内容显示所有数据或隐藏数据？跨度>

这是一个全选按钮的外观示例，但是 $(".select_all").click 会中断 $(".toggler").click: jsfiddle.net/BMT4x/1

我为我的“全部切换”困境创建了一个新问题。***.com/questions/21320946/…

【参考方案2】：

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

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

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

此代码使用.toggle 的最新版本，接受布尔参数。

也可以做得更简洁：

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

【讨论】：

我实际上需要相反：当一个按钮被“选中”时，具有相应类的行项目应该是可见的。我更新了 JSFiddle：jsfiddle.net/a4NkN/4 ...谢谢...

@user2888697：我更新了答案以反映这一点，这只是反转条件的问题。