1

我想做以下事情:

例子

描述

当检查下一个复选框时,Ingredients selection仅应显示使用检查成分的菜肴。使用复选框,因为应立即选择多种成分。

因此,如果tomatogarlic将被选中,那么只有盘子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>

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

我走了多远:

脚本.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");
        }
      }
      */
    }

  });
});

我怎样才能实现这个功能?

是代码的演示。

4

3 回答 3

1

我已经稍微完善了你的代码,

这是一个现场演示

JS代码:

  $(function () {
 ////Jquery in here/////
$(".ingredients").on('click',function () {
//  alert($(this).is(':checked'));

 if ($(this).is(':checked')) {
  var selected_ingredient = $(this).parent().text();
    $('.dish li').each(function(){
        var dishIngr=$(this).text();
        if(dishIngr.indexOf(selected_ingredient) >= 0)
        //if(dishIngr:contains(selected_ingredient))
        {
            $(this).removeClass('hide');
        }
      /*  else
        {
            $(this).addClass('hide');
        }*/

    });

  //var dishes = $("ul.dish").html();
  /*
  // Pseudocode
  for li_element in dishes{
    if (selected_ingredient in li_element){
      li_element.overwrite_attribute(style, "display:block");
    }
  }
  */
}
   else {
        $('.dish li').each(function () {
            if (!($(this).hasClass('hide'))) $(this).addClass('hide');
        });
        }

});
});

HTML 代码:

在 html 代码部分,我只更改了一件事,为所有复选框成分添加了一个类。

快乐编码:)

于 2013-07-20T14:41:31.503 回答
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();
            }    
        });
    });
});

小提琴

于 2013-07-20T14:24:21.893 回答
0

使用以下代码:

$(function () {
  $("input").change(function () {
    if (this.checked) {
      var selected_ingredient = $(this).parent().text();
        $("ul.dish li").each(function(){
            if($(this).is(':contains('+selected_ingredient+')')){
               $(this).css("display","block");
            }
        });
   }else{
      $("ul.dish li").each(function(){
            if(!$(this).is(':contains('+selected_ingredient+')')){
               $(this).css("display","none");
            }else{
                $(this).css("display","block");
            }
        });
      }
  });  
});
于 2013-07-20T14:51:19.623 回答