有条件的jQuery切换功能

我想隐藏并显示基于其归因类的列表项。有条件的jQuery切换功能

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

我创造了我的问题的演示：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(); 
});

如果选择“简单”和“乐”按钮，划船就会消失。

我该如何获得划船？

来源

2014-01-21 user2888697

这可能是一个好点的开始。虽然你可以做到这一点更便宜，更清洁，给人的想法：

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

//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/

来源

2014-01-21 23:07:02

使用解决方案的功能，是否有创建“全选”按钮的方法，单击该按钮后，将显示所有数据或隐藏数据，具体取决于所选内容？ – user2888697

这里是全选按钮将如何看一个例子，但是$（“SELECT_ALL。‘）点击符$（’toggler。”）点击：。http://jsfiddle.net/BMT4x/1/ – user2888697

我创建一个新的问题为我的“切换所有”的困境.. http://stackoverflow.com/questions/21320946/how-do-i-toggle-specific-element-classes-and-also-toggle-all-elements – user2888697

基于按钮过滤器中的一个点击你不能无条件地切换元素，如果它是可能的元素以满足一次多个过滤器。正确的做法是多一点参与。

由于您的checked类意味着只显示与该按钮相对应的项目，因此请按照按钮的当前状态切换它们。当且仅当相应按钮由于点击而出现checked时，应该显示这些项目。

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

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

它也可以更succintly完成：

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

来源

2014-01-21 21:34:38 Jon

我实际需要的正好相反：当按钮被“选中”，与相应的班线项目应该是可见的。我更新了JSFiddle：http://jsfiddle.net/a4NkN/4/ ...谢谢... – user2888697

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

有条件的jQuery切换功能

回答

相关问题