如何“切换全部”，并切换特定类别的元素？

-1

我想切换列表项的类的可见性，并切换所有列表项的可见性。在another stack overflow post的帮助下，我可以切换特定类别的列表项目。如何“切换全部”，并切换特定类别的元素？

这里的Java脚本我有切换的列表项具体类别：

var switcher = [false, false, false]; 
var classes = ['easy', 'fun', 'silly']; 

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked", !x); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 
});

我说的基本功能隐藏和显示所有列表项，但功能刹车个人类切换：

$('.select_all').click(function() { 
    $(".toggler").toggleClass("checked"); 
    $('li').toggleClass("hidden"); 
});

我该如何保持班级切换，并添加另一个切换所有项目的按钮？

这里有一个小提琴例如：http://jsfiddle.net/BMT4x/1/

来源

2014-01-23 user2888697

我不知道这是否是你想要做什么，但它应该给你一个正确的方向推（至少我的方向走）。我更喜欢用类来打开所有东西。喜欢的东西：

<button class="toggler" data-class="easy">Easy</button>, 
<button class="toggler" data-class="fun">Fun</button>, 
<button class="toggler" data-class="silly">Silly</button>, 
<button class="toggler" data-class="all">Select All</button> 


<ul id="list"> 
    <li class="easy">Bowling</li> 
    <li class="fun">Balooning</li> 
    <li class="fun easy">Boating</li> 
    <li class="silly">Barfing</li> 
    <li class="easy fun">Bafooning</li> 
</ul>

的CSS：

#list li { 
    display: none; 
} 
#list.easy li.easy { 
    display: block; 
} 
#list.fun li.fun { 
    display: block; 
} 
#list.silly li.silly { 
    display: block; 
} 
#list.all li { 
    display: block; 
}

的JS：

$('.toggler').click(function() { 
    var category = $(this).data('class'); 
    $('#list').toggleClass(category); 
});

和参照用小提琴：http://jsfiddle.net/qLLYj/

来源

2014-01-23 23:14:47 Chad

我想你可能已经忘记了“一切”类添加到'li'元素？ – VIDesignz

@VIDesignz好，如果它显示他们全部......他们不需要班级哈哈。 – Chad

我只是说基于你的脚本，切换全部按钮什么都不做。这就是全部...... – VIDesignz

您可以明确地添加/删除类的通过秒，switch，参数toggleClass(see here)。

因此，您可以在单击.select_all按钮时更改所有单个开关和列表项的状态。

$('.select_all').click(function() { 
    $('.select_all').toggleClass("checked"); 
    var allChecked = $('.select_all').hasClass("checked"); 
    switcher = [allChecked, allChecked, allChecked]; 
    $(".toggler").toggleClass("checked", allChecked); 
    $('li').toggleClass("hidden", !allChecked); 
});

做一些进一步的修改，以获得更直观的行为（例如，如果全部选中，切换的点击一个取消选择.select_all以及本身;检查所有个人切换意味着.select_all被自动选中）：

$('.toggler').click(function() { 
    var x = $(this).hasClass('checked'); 
    switcher[$(this).data('switch')] = !x; 
    $(this).toggleClass("checked"); 
    $('li').each(function() { 
     var cur = $(this); 
     cur.addClass('hidden'); 
     $.each(switcher, function (index, data) { 
      if (data && cur.hasClass(classes[index])) { 
       cur.removeClass('hidden'); 
      } 
     }); 
    }); 

    var allChecked = switcher.indexOf(false) < 0; 
    $('.select_all').toggleClass("checked", allChecked); 
});

小提琴：http://jsfiddle.net/ET33B/

来源

2014-01-24 00:11:59 David

如何“切换全部”，并切换特定类别的元素？

回答

相关问题