我有大量的div/文章,其中包含了一些荒野指南的联系信息。我试图根据两组复选框切换每个div的可见性-一组用于向导专门从事的活动(钓鱼、狩猎等),另一组用于他们所在的州(阿拉斯加、科罗拉多等)。
有一个类似的问题,我一直在尝试,但我遗漏了一些东西。
更新:过滤器目前主要工作,但彼此独立,不在一起。如果有人从第一组过滤器中选择钓鱼,而阿拉斯加从第二组过滤器中选择钓鱼,则当前会显示所有提供钓鱼的指南,无论他们是否在阿拉斯加,因为已检查钓鱼。另一个问题是,如果检查了2个状态,它将不会显示任何结果,因为没有div将有2个状态用于类。。。和vs或问题。
最终目标是让用户选择尽可能多的运动和状态,并过滤(隐藏)与所选运动和状态不匹配的div。理想情况下,作为一个no-JS回退,我想先显示所有div,然后删除可见性,因为不满足过滤条件,但我接下来将处理这个问题。
以下是最新的here
快速而肮脏的HTML:

    <div class="sport-wrapper">
        <h2>Choose a Sport:</h2>
        <ul>
            <li><label for="fish"><input type="checkbox" id="fish" name="sport"/>Fly Fishing</label></li>
            <li><label for="hunt"><input type="checkbox" id="hunt" name="sport" />Hunting</label></li>
            <li><label for="raft"><input type="checkbox" id="raft" name="sport" />Rafting</label></li>
        </ul>
    </div>
    <div class="state-wrapper">
        <h2>Choose a State:</h2>
        <ul>
            <li><label for="AK" class="guide-available"><input type="checkbox" id="AK" name="state"/>Alaska</label></li>
            <li><label for="CA" class="guide-available"><input type="checkbox" id="CA" name="state"/>California</label></li>
            <li><label for="CO" class="guide-available"><input type="checkbox" id="CO" name="state"/>Colorado</label></li>
        </ul>
    </div>
    <div class="results">
        <h2>Available Guides:</h2>
        <div data-category="guide ak fish">
            <h3>Joe's Alaska Fishing Tours</h3>
        </div>
        <div data-category="guide ak fish hunt">
            <h3>Mike's Alaska Fishing and Hunting Adventures</h3>
        </div>
        <div data-category="guide co fish raft">
            <h3>Jim's Colorado Rafting and Fishing Lodge</h3>
        </div>
        <div data-category="guide ca raft">
            <h3>California Whitewater Rafting</h3>
        </div>
    </div>

而当前的jQuery(不太管用):
function filterItems() {
    var state = $(":checkbox:checked").map( function(){ return this.value; }).get();
    var goodClasses = state.join(",");
    $(".guide").hide().filter(goodClasses).show();
}

filterItems();

$(":checkbox").change(filterItems);

最佳答案

我看不出你的小提琴代码有什么问题,除了你没有把“item”作为类。
HTML格式

function filterItems() {

    var state = $(":checkbox:checked").map(function () {
        return this.value;
    }).get();

    console.log(state);

    var goodClasses = state.join("");
    console.log("Displaying : " + goodClasses);
    $(".item").hide().filter(goodClasses).show();
};

filterItems();

$(":checkbox").change(filterItems);

ul {
    display:inline-block;
    list-style:none;
}
li {
    float:left;
    margin-left:2em;
    font-family:sans-serif;
}
h2 {
    color:#666;
}
h3 {
    color:#99CC00;
    border:1px #666 solid;
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <h2>Choose a Sport:</h2>
<ul class="sport-list">
    <li>
        <input type="checkbox" id="fish" name="sport" value=".fish">
        <label for="fish">Fly Fishing</label>
    </li>
    <li>
        <input type="checkbox" id="hunt" name="sport" value=".hunt">
        <label for="hunt">Hunting</label>
    </li>
    <li>
        <input type="checkbox" id="raft" name="sport" value=".raft">
        <label for="raft">Rafting</label>
    </li>
</ul>
 <h2>Choose a State:</h2>

<ul class="state-list">
    <li>
        <input type="checkbox" id="AK" name="state" value=".ak">
        <label for="AK" class="guide-available">Alaska</label>
    </li>
    <li>
        <input type="checkbox" id="CA" name="state" value=".ca">
        <label for="CA" class="guide-available">California</label>
    </li>
    <li>
        <input type="checkbox" id="CO" name="state" value=".co">
        <label for="CO" class="guide-available">Colorado</label>
    </li>
</ul>
 <h2>Available Guides:</h2>
        <div>
<article class="item guide ak fish">
     <h3>Joe's Alaska Fishing Tours</h3>

</article>
<article class="item guide ak fish hunt">
     <h3>Mike's Alaska Fishing and Hunting Adventures</h3>

</article>
<article class="item guide co fish raft">
     <h3>Jim's Colorado Rafting and Fishing Lodge</h3>

</article>
<article class="item guide ca raft">
    <h3>California Whitewater Rafting</h3>
    </article>
            <div>

关于javascript - 使用jQuery基于两组复选框切换各个div的可见性?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29269828/

10-12 12:52
查看更多