javascript - 勾选的复选框列出包含其名称的元素

Question

我想做以下事情:

描述

当选中Ingredients selection 下的复选框时，仅应显示使用选中成分的菜肴。使用复选框是因为应该能够一次选择多种成分。

因此，如果 tomato 和 garlic 被选中，那么只有 spaghetti 这道菜应该在 Dishes 下可见.

代码

my_html.html

<h1>Ingredients selection</h1>   
  <ul class="ingredient">
    <li><label>tomato</label><input type="checkbox" name="" value=""></li>
    <li><label>garlic</label><input type="checkbox" name="" value=""></li>
    <li><label>peas</label><input type="checkbox" name="" value=""></li>
  </ul>

<h1>Dishes</h1>
  <ul class="dish">
    <li style="display:none">spaghetti<span>[Ingredient: tomato, Ingredient: garlic]</span></li>
    <li style="display:none">stir_fry<span>[Ingredient: garlic, Ingredient: peas]</span></li>
    <li style="display:none">ice_cream<span>[Ingredient: sugar, Ingredient: milk]</span></li>
  </ul>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="/static/js/script.js"></script>

请注意，这些值是通过模板语言从数据库生成的。

我走了多远:

script.js

$(function () {
  ////Jquery in here/////
  $("input").change(function () {
    if (this.checked) {
      var selected_ingredient = $(this).parent().text();
      var dishes = $("ul.dish").html();
      /*
      // Pseudocode
      for li_element in dishes{
        if (selected_ingredient in li_element){
          li_element.overwrite_attribute(style, "display:block");
        }
      }
      */
    }

  });
});

如何实现此功能？

Here是代码的演示。

Answer 1

像这样:

$(function () {
    $(".ingredient input").on('change', function () {
        var check = $.map($(".ingredient input:checked"), function(el) {
            return $(el).siblings('label').text();
        });

        $('.dish li').hide().each(function(_, self) {
            for (var i=0; i<check.length; i++) {
                if ( $(self).find('span').text().toLowerCase().indexOf( check[i].toLowerCase() ) != -1 ) 
                    $(self).show();
            }    
        });
    });
});

FIDDLE