Jquery筛选器列表DIV通过复选框

你好，我有一个公寓列表，我需要通过复选框按类型（例如工作室，1间卧室，2间卧室）过滤它们。 您可以在http://jsfiddle.net/YByCk/1/看到该演示如果您选择1卧室和2卧室以显示1和2卧室的结果（如果已经检查1），我不知道如何制作。 问题是，当您选中第二个复选框时，将仅显示最后一个复选框filter，也不会保留选中的其他复选框。

//function count results after filter function divcount() { var resCount = $('.listing').filter(":visible").size(); //alert(resCount) $("#contResults").html(resCount + ' results'); } //bedrooms filter $("#Studio").click(function(){ if($("#Studio").is(':checked')) { $('.listing[bedrooms!="Studio"]').hide(); divcount(); } if(!$("#Studio").is(':checked')) { $('.listing[bedrooms!="Studio"]').show(); divcount(); } }); $("#1B").click(function(){ if($("#1B").is(':checked')) { $('.listing[bedrooms!="1 Bedroom"]').hide(); divcount(); } if(!$("#1B").is(':checked')) { $('.listing[bedrooms!="1 Bedroom"]').show(); divcount(); } }); $("#2B").click(function(){ if($("#2B").is(':checked')) { $('.listing[bedrooms!="2 Bedroom"]').hide(); divcount(); } if(!$("#2B").is(':checked')) { $('.listing[bedrooms!="2 Bedroom"]').show(); divcount(); } }); $("#3B").click(function(){ if($("#3B").is(':checked')) { $('.listing[bedrooms!="3 Bedroom"]').hide(); divcount(); } if(!$("#3B").is(':checked')) { $('.listing[bedrooms!="3 Bedroom"]').show(); divcount(); } }); $("#4B").click(function(){ if($("#4B").is(':checked')) { $('.listing[bedrooms!="4 Bedroom"]').hide(); divcount(); } if(!$("#4B").is(':checked')) { $('.listing[bedrooms!="4 Bedroom"]').show(); divcount(); } }); $("#5B").click(function(){ if($("#5B").is(':checked')) { $('.listing[bedrooms!="5 Bedroom"]').hide(); divcount(); } if(!$("#5B").is(':checked')) { $('.listing[bedrooms!="5 Bedroom"]').show(); divcount(); } }); 

有任何想法吗？

谢谢

Answer 1

我简化了您的代码并使用data属性来存储卧室数量。

HTML

 1 bedroom
 2 bedrooms
 3 bedrooms
 
 
1 bedroom apartment
 
1 bedroom apartment
 
3 bedroom apartment
 
2 bedroom apartment
 
2 bedroom apartment
 
2 bedroom apartment
 
3 bedroom apartment
 
2 bedroom apartment
 
1 bedroom apartment
 
2 bedroom apartment
  

JQUERY

 $('input').change(function(){ $('input').each(function(){ var checked = $(this).attr('checked') || false; var numberofrooms = $(this).data('bedrooms'); $('li').each(function(){ if ($(this).data('bedrooms')==numberofrooms){ checked ? $(this).show() : $(this).hide(); } }); }); }); 

这就是它。 看看jsfiddle 。

编辑

我摆弄了一些，并想出了这个：

 $('input').change(function(){ var allchecked=0; $('input').each(function(){ var checked; if (checked = $(this).attr('checked')) {allchecked++}; var numberofrooms = $('li[data-bedrooms='+$(this).data('bedrooms')+']'); checked ? numberofrooms.show('slow'): numberofrooms.hide('slow'); }); if(allchecked==0){$('li').show('slow');} }); 

我认为它更优雅，如果没有选中复选框，现在将显示所有列表。 这里的例子 。

Answer 2

如果他们不等于什么，而不是做你正在做的事情并隐藏房间，为什么不先隐藏所有东西，然后展示你感兴趣的那个？ 将click事件与整个复选框绑定，然后循环显示它们，显示与复选框匹配的房间。

试试这个jsFiddle

这是使元素隐藏或可见的jQuery：

 $('input').click(function() { $('.listing').hide(); $('input').each(function(index) { if ($(this).is(':checked')) { $('.listing[bedrooms="' + $(this).attr('id') + '"]').show(); } }); }); 

请注意，为了使这项工作，除了新的jQuery，我修改了列表的HTML，以便卧室属性与您的复选框的ID匹配。 因此，不是你的房间列表有像bedrooms="2 Bedroom"的属性，他们有属性bedrooms="2B" （工作室保持不变）。 另请注意，ID永远不应该以数字开头，我只是在我的示例中保留它们以最小化代码更改。 您可以轻松地将它们从1B，2B，3B等更改为B1，B2，B3等。

Answer 3

我没有深入了解实际问题。 但这是我尝试为您从代码中理解的内容提供解决方案。 如果我错了，请纠正我:)

工作实例： http ： //jsfiddle.net/ylokesh/YByCk/10/

更改：我所做的是使DIV ID与复选框ID相同。 它将匹配特定ID并显示匹配的DIV。

此外，最初将一个css规则应用于“display：none”所有列表div。 可能需要传递checked对象以在页面上显示默认结果，然后在document.ready上执行一些操作。 希望！

Answer 4

首先使用参数创建一个函数：

 function roomFilter (checkbox, room) { if(!$(checkbox).is(':checked')) { $('.listing[bedrooms!="'+room+'"]').hide(); divcount(); } 

给所有filter复选框添加相同的类…然后你可以用它的参数调用该函数：

 $('.checkbox-filters').each(function(){ roomFilter(??1, ??2); // i dont know where your "1B" or "1 Bedroom" is coming from // if "1B" is your checkbox value instead "??1" paramater insert $(this).val() // if "1 Bedroom" is the label do instead "??2" parameter $(this).closest('label').text() }); 

编辑：不要覆盖你的列表我编辑了我的答案..为你