有条件的jQuery切换功能 [英] Conditional jQuery Toggle Function

问题描述

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

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

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

这里是JS代码：

  $（'＃easy'）。click（function（）{
 $（this）。 toggleClass（checked）; 
 $（'。easy'）。toggle（）; 
}）; 
 $ b $（'＃fun'）。click（function（）{
 $（this）.toggleClass（checked）; 
 $（'。fun'）。 toggle（）; 
}）; 
 
 $ b $（'＃傻瓜'）。click（function（）{
 $（this）.toggleClass（checked）; 
 $（'。愚蠢'）。toggle（）; 
}）; 
  

如果您选择Easy和Fun按钮，Boating将会消失。

如何让Boating留下来？

解决方案

从一开始就是一个好点。虽然你可以做到这一点更便宜，更清洁，但它提供了这样的想法：

使用一个数组来保存选择按钮的状态，一个保存类名。无论何时您点击选择按钮，您都可以将所有元素设置为不可见，并重新设置可见的元素，这些元素已被其他按钮或当前点击选择，这些都保存在切换器阵列中。

  //保存按钮是否激活
 var switcher = [false，false，false]; 
 //保存你的类可选
 var classes = ['easy'，'fun'，'silly']; （）。
 $ b $（'。toggler'）。click（function（）{
 // to the select button and save status 
 var x = $（this）.hasClass（' （$）; $ x $（this）.toggleClass（checked，！x）; 
 
 //遍历你的元素，在需要时设置它们为活动状态
 $（'li'）。each（function（）{
 var cur = $（this）; 
 cur。 （data& cur.hasClass（classes [index]））{
 cur.removeClass（'hidden'）; 
} 
}）; 
}）; 
}）; 
  

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

I want to hide and show list items based on their attributed class.

The problem is that certain list items have multiple classes. So if I toggle one class then toggle another, any items with both selected classes will be removed.

I created a demo of my problem: http://jsfiddle.net/a4NkN/2/

Here's the 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();
});

If you select the "Easy" and "Fun" buttons, Boating will disappear.

How can I get Boating to stay?

解决方案

This might be a good point to start from. Although you can do this cheaper and cleaner, that gives the idea:

Use an array to save the status of your selection buttons and one corresponding to hold the class names. Whenever your select buttons get clicked, you set all your elements invisible and reset those visible again, that are already selected by other buttons or the currently clicked, which is all saved in the switcher array.

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

Whole solution in this fiddle: http://jsfiddle.net/BMT4x/

这篇关于有条件的jQuery切换功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！