我有大量的div /文章包含一堆荒野指南的联系信息。我试图根据两组复选框切换每个div的可见性 - 一组用于指南专门用于（捕鱼，狩猎等）的活动，另一组用于他们所处的状态（阿拉斯加州） ，科罗拉多州等。）
有一个类似的问题here我一直试图遵循，但我错过了一些东西。
更新：过滤器目前大多数工作，但彼此独立，不在一起。如果有人选择第一组过滤器中的FISHING和第二组过滤器中的ALASKA，它目前会显示所有提供钓鱼的指南，无论他们是否在阿拉斯加，因为检查钓鱼。另一个问题是，如果检查了2个状态，它将不会显示任何结果，因为没有div将有2个状态用于类... AND AND 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);
答案 0 :(得分：1)
除了你没有包含＆＃34; item＆＃34;之外，我没有看到你的小提琴代码有什么问题。作为班级。
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>
答案 1 :(得分：1)
请使用此更新的代码， 你需要上课$（＆＃39; .guide＆＃39;）而不是$（＆＃39; .item＆＃39;）和加入（＆＃34;＆＃34;）应该加入（＆＃34; ，＆＃34;）in
function filterItems() {
var state = $(":checkbox:checked").map( function(){ return this.value; }).get();
var goodClasses = state.join(",");
$(".guide").hide().filter(goodClasses).show();
}
$(document).ready(function(){
filterItems();
$(":checkbox").change(filterItems);
});
答案 2 :(得分：0)
好的......所以我在发布这个问题之前回到了我一直在看的类似问题。您可以看到该问题/解决方案HERE。在发布此问题之前，我应该花更多时间了解这一点。
这是一个有效的解决方案
简而言之，我通过名称属性（Pho3nixHun＆＃39;我的参考问题中的解决方案）循环使用复选框组的解决方案
它开始显示整个指南列表。然后，它将过滤到所选的任何和所有运动，然后将使用所选的任何和所有状态过滤这些结果。
这里是完全有效的JSFiddle
正在运行的jQuery：
var bySport = [], byState = [];
$("input[name=sport]").on( "change", function() {
if (this.checked) bySport.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(bySport, "[data-category~='" + $(this).attr("value") + "']");
});
$("input[name=state]").on( "change", function() {
if (this.checked) byState.push("[data-category~='" + $(this).attr("value") + "']");
else removeA(byState, "[data-category~='" + $(this).attr("value") + "']");
});
$("input").on( "change", function() {
var str = "Include items \n";
var selector = '', cselector = '', nselector = '';
var $lis = $('.guide-list > div'),
$checked = $('input:checked');
if ($checked.length) {
if (bySport.length) {
if (str == "Include items \n") {
str += " " + "with (" + bySport.join(',') + ")\n";
$($('input[name=sport]:checked')).each(function(index, bySport){
if(selector === '') {
selector += "[data-category~='" + bySport.id + "']";
} else {
selector += ",[data-category~='" + bySport.id + "']";
}
});
} else {
str += " AND " + "with (" + bySport.join(' OR ') + ")\n";
$($('input[name=sport]:checked')).each(function(index, bySport){
selector += "[data-category~='" + bySport.id + "']";
});
}
}
if (byState.length) {
if (str == "Include items \n") {
str += " " + "with (" + byState.join(' OR ') + ")\n";
$($('input[name=state]:checked')).each(function(index, byState){
if(selector === '') {
selector += "[data-category~='" + byState.id + "']";
} else {
selector += ",[data-category~='" + byState.id + "']";
}
});
} else {
str += " AND " + "with (" + byState.join(' OR ') + ")\n";
$($('input[name=state]:checked')).each(function(index, byState){
if(cselector === '') {
cselector += "[data-category~='" + byState.id + "']";
} else {
cselector += ",[data-category~='" + byState.id + "']";
}
});
}
}
$lis.hide();
console.log(selector);
console.log(cselector);
console.log(nselector);
if (cselector === '' && nselector === '') {
$('.guide-list > div').filter(selector).show();
} else if (cselector === '') {
$('.guide-list > div').filter(selector).filter(nselector).show();
} else if (nselector === '') {
$('.guide-list > div').filter(selector).filter(cselector).show();
} else {
$('.guide-list > div').filter(selector).filter(cselector).filter(nselector).show();
}
} else {
$lis.show();
}
$("#result").html(str);
});
function removeA(arr) {
var what, a = arguments, L = a.length, ax;
while (L > 1 && arr.length) {
what = a[--L];
while ((ax= arr.indexOf(what)) !== -1) {
arr.splice(ax, 1);
}
}
return arr;
}
以及HTML：
<pre id=result> </pre> <!-- PRE simply shows filters in action in the results to double check everything's working. Can remove -->
<h2>Let's Find You a Guide</h2>
<div class="filter-wrap">
<h3><strong>Select any or all activities you're interested in:</strong></h3>
<ul>
<li><label><input type="checkbox" name="sport" value="fish" id="fish" /> Fishing</label></li>
<li><label><input type="checkbox" name="sport" value="hunt" id="hunt" /> Hunting</label><br>
<li><label><input type="checkbox" name="sport" value="charter" id="charter" /> Boat Charters</label></li>
<li><label><input type="checkbox" name="sport" value="hike" id="hike" /> Hiking</label></li>
<li><label><input type="checkbox" name="sport" value="raft" id="raft" /> Rafting</label></li>
<li><label><input type="checkbox" name="sport" value="other" id="other" /> Other</label></li>
</ul>
<h3><strong>Select any states you're willing to travel to:</strong></h3>
<ul>
<li><label><input type="checkbox" name="state" value="AK" id="AK" /> Alaska</label></li>
<li><label><input type="checkbox" name="state" value="CA" id="CA" /> California</label></li>
<li><label><input type="checkbox" name="state" value="CO" id="CO" /> Colorado</label></li>
<li><label><input type="checkbox" name="state" value="NY" id="NY" /> New York</label></li>
</ul>
</div>
<hr/>
<div class="guide-list">
<div class="guide" data-category="raft CA CO">Rafting in California or Colorado</div>
<div class="guide" data-category="hike raft CO">Colorado Hiking and Rafting</div>
<div class="guide" data-category="raft NY ">Upstate New York Rafting</div>
<div class="guide" data-category="raft hunt NY">NY Hunting and Rafting Outfitters</div>
<div class="guide" data-category="raft NY">NYC Rafting Co.</div>
<div class="guide" data-category="charter NY">Charter Boats of NYC</div>
<div class="guide" data-category="hike raft other CO">Colorado Hike Bike and Raft</div>
<div class="guide" data-category="charter other NY">Bike and Boat Rentals New York</div>
<div class="guide" data-category="fish CO">Colorado Fishing Tours</div>
<div class="guide" data-category="fish CA">Fishing Guides San Francisco</div>
<div class="guide" data-category="hike other CA">California Hiking and Other Stuff</div>
<div class="guide" data-category="raft AK">Alaskan Rafting Adventures</div>
<div class="guide" data-category="raft hunt CO">Denver Raft and Hunt</div>
</div>