我一直在尝试使用此代码段：https://github.com/pjstadig/deque-clojure并在我自己的网站中实现它，但是，它似乎不起作用。我使用的代码片段使用div而不是列表。但是，自从我编辑脚本以来，这应该没什么区别。
感谢任何帮助，谢谢。
$("#da-thumbs :checkbox").click(function() {
var filter = '.' + $("#da-thumbs :checkbox:checked").map(function() {
return this.value;
}).get().join(".");
$('.category-container li').hide();
$(filter).show();
}); <div class="banner">
<div class="container">
<div class="gallery-top heading margin-heading filter">
<h3>FILTER</h3>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2 tags filters">
<h4>Meal</h4>
<div class='checkbox'><input value='Breakfast' id='filter-Breakfast' type='checkbox'><label for='filter-Breakfast'> Breakfast</label></div><div class='checkbox'><input value='Lunch' id='filter-Lunch' type='checkbox'><label for='filter-Lunch'> Lunch</label></div><div class='checkbox'><input value='Dinner' id='filter-Dinner' type='checkbox'><label for='filter-Dinner'> Dinner</label></div><div class='checkbox'><input value='Dessert' id='filter-Dessert' type='checkbox'><label for='filter-Dessert'> Dessert</label></div><div class='checkbox'><input value='Light Bites' id='filter-Light Bites' type='checkbox'><label for='filter-Light Bites'> Light Bites</label></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<h4>Cuisine</h4>
<div class='checkbox'><input id='2' type='checkbox'><label for='Italian'> Italian</label></div><div class='checkbox'><input id='3' type='checkbox'><label for='Thai'> Thai</label></div><div class='checkbox'><input id='1' type='checkbox'><label for='Vegan'> Vegan</label></div> </div>
</div>
</div>
<script>
$(".filter").click(function(){
$(".filters").slideToggle("fast");
//if ( $('#filters').is(':hidden') ) {
//}
});
</script>
<!--banner-end-->
<!--gallery-starts-->
<div class="gallery">
<div class="container">
<div class="gallery-top heading">
<h3>OUR RECIPES</h3>
</div>
<section>
<ul id="da-thumbs" class="da-thumbs category-container">
<li class="Dessert Italian">
<a href="1" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/1/1.jpg" alt="" />
<div>
<h5>Lasagna </h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<li class="Dinner Italian Vegan">
<a href="2" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/2/1.jpg" alt="" />
<div>
<h5>Vegan Spaghetti</h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<li class="Dinner Lunch Italian">
<a href="3" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/3/1.jpg" alt="" />
<div>
<h5>Meat Spaghetti</h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<div class="clearfix"> </div>
</ul>
</section>
答案 0 :(得分：0)
#da-thumbs :checkbox为空，因为:checkbox中没有#da-thumbs个元素。此外，“cuisine”部分复选框上没有值属性，该值用作在配方部分按类名过滤的字符串。
我从您引用#da-thumbs的地方删除了:checkbox，并填写了烹饪复选框的值。
$(":checkbox").click(function() {
var filter = $(":checkbox:checked").map(function() {
return this.value;
}).get().join(".");
if (filter == '') {
$('.category-container li').show();
} else {
$('.category-container li').hide();
$('.'+filter).show();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
<div class="container">
<div class="gallery-top heading margin-heading filter">
<h3>FILTER</h3>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2 tags filters">
<h4>Meal</h4>
<div class='checkbox'><input value='Breakfast' id='filter-Breakfast' type='checkbox'><label for='filter-Breakfast'> Breakfast</label></div>
<div class='checkbox'><input value='Lunch' id='filter-Lunch' type='checkbox'><label for='filter-Lunch'> Lunch</label></div>
<div class='checkbox'><input value='Dinner' id='filter-Dinner' type='checkbox'><label for='filter-Dinner'> Dinner</label></div>
<div class='checkbox'><input value='Dessert' id='filter-Dessert' type='checkbox'><label for='filter-Dessert'> Dessert</label></div>
<div class='checkbox'><input value='Light Bites' id='filter-Light Bites' type='checkbox'><label for='filter-Light Bites'> Light Bites</label></div>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<h4>Cuisine</h4>
<div class='checkbox'><input id='2' type='checkbox' value="Italian"><label for='Italian'> Italian</label></div>
<div class='checkbox'><input id='3' type='checkbox' value="Thai"><label for='Thai'> Thai</label></div>
<div class='checkbox'><input id='1' type='checkbox' value="Thai"><label for='Vegan'> Vegan</label></div>
</div>
</div>
</div>
<script>
$(".filter").click(function() {
$(".filters").slideToggle("fast");
//if ( $('#filters').is(':hidden') ) {
//}
});
</script>
<!--banner-end-->
<!--gallery-starts-->
<div class="gallery">
<div class="container">
<div class="gallery-top heading">
<h3>OUR RECIPES</h3>
</div>
<section>
<ul id="da-thumbs" class="da-thumbs category-container">
<li class="Dessert Italian">
<a href="1" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/1/1.jpg" alt="" />
<div>
<h5>Lasagna </h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<li class="Dinner Italian Vegan">
<a href="2" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/2/1.jpg" alt="" />
<div>
<h5>Vegan Spaghetti</h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<li class="Dinner Lunch Italian">
<a href="3" rel="title" class="b-link-stripe b-animate-go thickbox">
<img src="/images/Recipes/3/1.jpg" alt="" />
<div>
<h5>Meat Spaghetti</h5>
<span>asagne originated in Italy, traditionally ascribed to the city of Naples (Campania), where the first modern recipe was created in the Middle Ages</span>
<span class="skill">Skill: Easy</span>
<span class="time">Time: 30 mins</span>
</div>
</a>
</li>
<div class="clearfix"> </div>
</ul>
</section>