我有大量的 div/文章,其中包含一堆荒野指南的联系信息。我试图根据两组复选框切换每个 div 的可见性——一组用于指南专门从事的事件(钓鱼、打猎等),一组用于他们所在的州(阿拉斯加、科罗拉多等) ).
有一个有点类似的问题here我一直在努力遵循,但我遗漏了一些东西。
更新:过滤器目前主要工作,但彼此独立,而不是一起工作。如果有人从第一组筛选器中选择 FISHING,从第二组筛选器中选择 ALASKA,它当前会显示所有提供钓鱼的指南,无论他们是否在阿拉斯加,因为选中了钓鱼。另一个问题是,如果检查了 2 个状态,它不会显示任何结果,因为没有 div 将有 2 个状态的类......一个 AND vs OR 问题。
最终目标是让用户选择尽可能多的运动和状态,并过滤掉(隐藏)与所选运动和状态不匹配的 div。理想情况下,作为无 JS 后备方案,我想首先显示所有 div,然后在不满足过滤条件时删除可见性,但接下来我会解决这个问题。
这是更新的 JSFiddle
快速而肮脏的 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);
最佳答案
我看不出你的 fiddle 代码有什么问题,只是你没有将“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/