3

我正在尝试创建一个具有两个类别的复选框过滤系统。这些类别将输出每个类别独有的结果。我在这里创建了小提琴页面来展示我在做什么。我只想显示匹配这两个类别的结果。

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 回答