0

次のコードを使用して、チェックボックスを使用して結果をフィルタリングしています。共通の項目をチェックした結果が表示されます。

$('input').change(function() {

    var room_array = new Array(),
        loc_array = new Array();
    $('.br').each(function() {
        if ($(this).is(':checked')) {
            room_array.push($(this).data('bedrooms'));
        }
    });
    $('.loc').each(function() {
        if ($(this).is(':checked')) {
            loc_array.push($(this).data('location'));
        }
    });
    //console.log(loc_array, room_array);
    $('li').each(function() {
        if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
});

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

<input data-location="london" class="loc" type="checkbox">london<br>
<input data-location="new-york" class="loc" type="checkbox">new york<br>
<input data-location="paris" class="loc" type="checkbox">paris<br><br>    

<ul>
    <li data-bedrooms="1"  data-location="paris">1 bedroom apartment paris</li>
    <li data-bedrooms="1" data-location="paris">1 bedroom apartment</li>
        <! -- similar combinations -->
    <li data-bedrooms="2" data-location="new-york">2 bedroom apartment new yor</li>
</ul>

JSFiddle

問題は、1種類のチェックボックスのみを選択すると、そのチェックボックスの結果が表示されないことです。

ただし、寝室の数や場所など、1つのタイプのみを選択できるようにしたいと思います。どうすればこれを達成できますか？

4

2 に答える 2

2

交換

if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1) {

と

if (($.inArray($(this).data('location'), loc_array) > -1 || !$('.loc:checked').length) && ($.inArray($(this).data('bedrooms'), room_array) > -1 || !$('.br:checked').length)) {

グループのチェックボックスがチェックされていない場合に、そのグループの任意の値を受け入れます。

ちなみに、あなたのフィドルには2つのエントリがありました

<li data-bedrooms="2" data-location="paris">2 bedroom apartment paris</li>

london最初の例が示唆したように、そのうちの1つを変更しました。

jsフィドル

于 2012-08-01T14:51:49.893 に答える
0

この行

if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1)

する必要があります

if ($.inArray($(this).data('location'), loc_array) > -1 || $.inArray($(this).data('bedrooms'), room_array) > -1)
于 2012-08-01T14:50:58.293 に答える