Question

所以我正在检查一种创建搜索功能的方法，该功能使用基于许多标准的结果过滤，通过选中复选框从数据库中检索。我从http://jsfiddle.net/magicalex/FmQvc/找到了jsfiddle代码。

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

$(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>

但这不是出现的情况，它根据检查的两个浴室标准显示出三间卧室。

Answer 1

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

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

如何使用javascript过滤许多标准？

1 个答案: