3

2 つのカテゴリを持つチェックボックス フィルタリング システムを作成しようとしています。これらのカテゴリは、それぞれに排他的な結果を出力します。私がやっていることを示すために、ここにフィドルページを作成しました。両方のカテゴリに一致する結果のみを表示したい。

HTML テストは次のようになります。

<div class="filter">
    <form id="partners">
        <h4>Filter by Venue:</h4>
        <input type="checkbox" name="team" value="BBG" />BBG<br />
        <input type="checkbox" name="team" value="BCM" />BCM<br />
        <input type="checkbox" name="team" value="BM" />BM<br />
        <input type="checkbox" name="team" value="BPL" />BPL<br />
        <input type="checkbox" name="team" value="BPP" />PP<br />
        <input type="checkbox" name="team" value="PPZ" />PPZ<br />
    </form>
    <br />
    <h4> Filter by Ages: </h4>
    <form id="ages">
        <input type="checkbox" name="brand" value="aAll" />All Ages<br />
        <input type="checkbox" name="brand" value="aAdults" />Adults<br />
        <input type="checkbox" name="brand" value="aTeens" />Teens<br />
        <input type="checkbox" name="brand" value="a0-18" />0-18 months<br />
        <input type="checkbox" name="brand" value="a1" />1.5-3 years<br />
        <input type="checkbox" name="brand" value="a2" />2.5-5 years<br />
        <input type="checkbox" name="brand" value="a4-7" />4-7 years<br />
        <input type="checkbox" name="brand" value="a7-12" />7-12 years<br />
    </form>
</div>
<hr />
<div class="event">
    Item 1  BPP aAll
    <span class="check BPP aAll"> </span>
</div>
<div class="event">
    Item 2  BCM a2
    <span class="check BCM a2"> </span>
</div>
<div class="event">
    Item 3 BPP aAll
    <span class="check BPP aAll"> </span>
</div>
<div class="event">
    Item 4 BPP a7-12
    <span class="check BPP a7-12"> </span>
</div>

そして私のjQueryは次のようになります：

function filterThis() {
    var checked = $('input:checked');
    var venues = $('#partners input:checked').map(function() {
        return this.value;
    }).get();
    var ages = $('#ages input:checked').map(function() {
        return this.value;
    }).get();
    var both = $('input:checked').map(function() {
        return this.value;
    }).get();

    var details = $('.check');
    details.parents('.event').hide();

    if ($('input:checked').length === 0) {
        details.parents('.event').show();
    } else { 
        checked.each(function(index) {
            if (ages.length === 0) {
               console.log(venues[index]);
               $(".check." + venues[index].replace(' ', '.')).parents('.event').show();
            } else if (venues.length === 0) {
               console.log(ages[index]);
               $(".check." + ages[index].replace(' ', '.')).parents('.event').show();
            } else {
               console.log(both[index]);;
               $(".check." + both[index].replace(' ', '.')).parents('.event').show();
            }
        });
    }
}
$('input:checkbox').change(filterThis);​
4

1 に答える 1

1

JQuery.map()は文字列ではなく配列を返します。

交換：

$(".check." + both[index].replace(' ', '.')).parents('.event').show();

と：

$(".check." +  both.toString().replace(',', '.')).parents('.event').show();
于 2012-09-17T17:15:22.203 に答える