过滤<li>从复选框

Question

我一直在尝试使用此代码段： http : //jsfiddle.net/6wYzw/1294/并在我自己的网站中实现它，但是，它似乎不起作用。 我正在使用的代码段使用 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>

Answer 1

#da-thumbs :checkbox是空的，因为没有:checkbox中的元素#da-thumbs 。 此外，“美食”部分复选框上没有值属性，该值用作字符串以在配方部分按类名进行过滤。

我从您引用的地方删除了#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>