如何使用javascript按多种标准进行过滤？_Javascript_Jquery_Jsfiddle

如何使用javascript按多种标准进行过滤？

javascript jquery

如何使用javascript按多种标准进行过滤？,javascript,jquery,jsfiddle,Javascript,Jquery,Jsfiddle,因此，我正在寻找一种方法来创建一个搜索函数，该函数使用基于结果的多个条件进行过滤，这些条件通过选中复选框从数据库中检索。我从这里找到了JSFIDLE代码它适用于一个可变卧室，当我添加浴室标准时，它可以正常工作，但当我想基于这两个变量进行过滤时 $(window).load(function(){ $('input').change(function(){ var allchecked=0; $('input').each(function(){ var checked; if

因此，我正在寻找一种方法来创建一个搜索函数，该函数使用基于结果的多个条件进行过滤，这些条件通过选中复选框从数据库中检索。我从这里找到了JSFIDLE代码

它适用于一个可变卧室，当我添加浴室标准时，它可以正常工作，但当我想基于这两个变量进行过滤时

$(window).load(function(){
$('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');

    var numberofbathrooms = $('li[data-  bathrooms='+$(this).data('bathrooms')+']');
    checked ?  numberofbathrooms.show('slow'): numberofbathrooms.hide('slow');
});
if(allchecked==0){$('li').show('slow');}
});

例如： 1个卧室2个浴室都检查过了，这不会带来任何结果

<body>
<input data-bedrooms="1" type="checkbox">1 bedrooms<br>
<input data-bedrooms="2" type="checkbox">2 bedrooms<br>
<input data-bedrooms="3" type="checkbox">3 bedrooms<br><br>

<input data-bathrooms="1" type="checkbox">1 bathrooms<br>
<input data-bathrooms="2" type="checkbox">2 bathrooms<br>
<ul>
<li data-bedrooms="1" data-bathrooms="1">1 bedroom apartment</li>
<li data-bedrooms="1" data-bathrooms="1">1 bedroom apartment</li>
<li data-bedrooms="3" data-bathrooms="2">3 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="3" data-bathrooms="2">3 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
<li data-bedrooms="1" data-bathrooms="1">1 bedroom apartment</li>
<li data-bedrooms="2">2 bedroom apartment</li>
</ul>

</body>


1间卧室

两间卧室

3间卧室


1间浴室

两间浴室


一居室公寓
一居室公寓
三居室公寓
两居室公寓
两居室公寓
两居室公寓
三居室公寓
两居室公寓
一居室公寓
两居室公寓

但这并不是显示的内容，它会根据选中的两个浴室标准显示三个卧室。

如果要查找同时包含数据卧室属性和数据浴室属性的所有li元素，则需要使用匹配这两个属性的选择器

$('li[data-bedrooms='+$(this).data('bedrooms')+'][data-bathrooms='+$(this).data('bathrooms')+']')

那些

…data-…data…

选择器在我看来非常狡猾。通过添加额外的代码，您实际上将其设置为“逻辑OR”：您选择与第一个标准匹配的项，然后选择与第二个标准匹配的项。它们相互独立。您需要修复它，以便它们执行逻辑和。为什么不改为使用单选按钮？考虑到你想要一个单一的选择