そのため、チェックボックスをオンにしてデータベースから取得した多くの基準に基づく結果を使用してフィルタリングする検索機能を作成する方法をチェックアウトしていました。そして、 http://jsfiddle.net/magicalex/FmQvc/からjsfiddleコードを見つけました。
それは1つの変数の寝室で動作し、バスルームの基準を追加すると正しく動作しますが、両方の変数に基づいてフィルタリングしたい場合.
$(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>
しかし、それは表示されるものではなく、チェックされた 2 つのバスルームの基準に基づいて 3 つのベッドルームが表示されます。