Javascript 条件jQuery切换函数
我想根据列表项的属性类隐藏和显示列表项 问题是某些列表项有多个类。因此,如果我切换一个类,然后切换另一个类,则具有两个选定类的任何项目都将被删除 我创建了一个问题的演示: 以下是JS代码:Javascript 条件jQuery切换函数,javascript,jquery,html,logic,toggle,Javascript,Jquery,Html,Logic,Toggle,我想根据列表项的属性类隐藏和显示列表项 问题是某些列表项有多个类。因此,如果我切换一个类,然后切换另一个类,则具有两个选定类的任何项目都将被删除 我创建了一个问题的演示: 以下是JS代码: $('#easy').click(function(){ $(this).toggleClass( "checked" ); $('.easy').toggle(); }); $('#fun').click(function(){ $(this).toggleClass( "chec
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle();
});
$('#fun').click(function(){
$(this).toggleClass( "checked" );
$('.fun').toggle();
});
$('#silly').click(function(){
$(this).toggleClass( "checked" );
$('.silly').toggle();
});
如果你选择简单有趣的按钮,划船就会消失
我怎样才能保持划船状态?如果一个元素可以同时满足多个过滤器的要求,则不能通过单击其中一个按钮过滤器来无条件切换元素。正确的方法更复杂一些 由于您选中的类意味着只应显示与该按钮对应的项目,请严格执行以下操作:根据按钮的当前状态切换它们。当且仅当单击相应按钮后选中该按钮时,才应显示项目
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle($(this).is(".checked"));
});
此代码使用的是的最新版本,即接受布尔参数的版本
也可以更简洁地完成:
$('.easy').toggle($(this).toggleClass( "checked" ).is(".checked"));
这可能是一个很好的起点。虽然您可以更便宜、更清洁地完成此项工作,但这提供了以下想法: 使用数组保存选择按钮的状态,并使用对应的数组保存类名。每当单击“选择”按钮时,您都会将所有元素设置为不可见,并重新设置那些已被其他按钮或当前单击的元素选中的可见元素,这些元素都保存在切换器阵列中
//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');
}
});
});
});
整个解决方案如下:我实际上需要相反的方法:当选中按钮时,对应类的行项目应该可见。我更新了JSFIDLE:。。。谢谢…@user2888697:我更新了答案以反映这一点,这只是一个反转条件的问题。使用您的解决方案的功能,是否有一种方法可以创建一个全选按钮,当单击该按钮时,根据所选内容显示所有数据或隐藏数据?下面是一个全选按钮的外观示例,但是$.select_all.click中断$.toggler.click:我为我的toggle all难题创建了一个新问题。。