Question

我正在尝试构建以下功能：

该网页包含定义电影特征的复选框，例如＆＃34;喜剧＆＃34;，＆＃34;戏剧＆＃34;，＆＃34;英语＆＃34;，＆＃34;西班牙语＆＃34; 。当用户单击其中一个复选框时，页面上将显示具有相同类的div。

这是我在合理实施方面遇到问题的部分：如果用户选择第二个复选框，则显示的div应该被＆＃34;过滤＆＃34;多一点。换句话说，如果用户首先选择＆＃34;戏剧＆＃34;然后＆＃34;英语＆＃34;，只有那些两个类的div应该保持可见。

到目前为止，这是我的代码（它只会切换＆＃34;喜剧＆＃34; div开/关）：

＆＃13;

<!doctype html>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Movies</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>	
</head>

<body>

<div id="wrapper">
    <div id="content">

        <div id="heading">
            <h1 class="inline">Movies</h1>
        </div>

        <div id="selections">
            <label><input type="checkbox" value="comedy">Comedy</input></label>
            <label><input type="checkbox" value="drama">Drama</input></label>
            <label><input type="checkbox" value="english">English</input></label>
            <label><input type="checkbox" value="spanish">Spanish</input></label>
        </div>

        <div id="movies">
            <div class="comedy english">Comedy in english.. content</div>
            <div class="comedy spanish">Comedy in spanish.. content</div>
            <div class="drama spanish">Drama in spanish.. content</div>
            <div class="drama english">Drama in english.. content</div>
        </div>

    </div>
</div>
    <script>
        $(document).ready(function(){
            $('#movies div').toggle(); //hides movie content in the beginning

            $('input[type="checkbox"]').click(function(){
                if($(this).attr("value")=="comedy"){
                $('.comedy').toggle();
                }
            })
        });
    </script>
   </body>
</html>

＆＃13;

Answer 1

尝试

$(document).ready(function() {
  var $movies = $('#movies div').hide(); //hides movie content in the beginning

  var $checks = $('input[type="checkbox"]').change(function() {
    if ($checks.filter(':checked').length) {
      //use the types to gilter them
      var $selected = filter($movies, '.genre');
      $selected = filter($selected, '.language');
      $selected.show();
      $movies.not($selected).hide()
    } else {
      $movies.hide()
    }
  });

  function filter($src, type) {
    var selection = $checks.filter(type + ':checked').map(function() {
      return '.' + this.value;
    }).get();
    console.log(type, $src, selection)
    return selection.length ? $src.filter(selection.join(',')) : $src;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="content">
    <div id="heading">
      <h1 class="inline">Movies</h1>
    </div>
    <div id="selections">
      <!--Add a type class to the checkboxes-->
      <label><input type="checkbox" value="comedy" class="genre">Comedy</label>
      <label><input type="checkbox" value="drama" class="genre">Drama</label>
      <label><input type="checkbox" value="english" class="language">English</label>
      <label><input type="checkbox" value="spanish" class="language">Spanish</label>
    </div>
    <div id="movies">
      <div class="comedy english">Comedy in english.. content</div>
      <div class="comedy spanish">Comedy in spanish.. content</div>
      <div class="drama spanish">Drama in spanish.. content</div>
      <div class="drama english">Drama in english.. content</div>
    </div>
  </div>
</div>

Answer 2

也许更简单的解决方案

http://jsfiddle.net/goqqosf8/2/

 $(document).ready(function(){
     $('#movies div').hide(); //hides movie content in the beginning

     $('input[type="checkbox"]').click(function(){
         select()
     })
 });

function select()
{
    $('#movies div').hide();

    var $div=$('#movies div');
    var check=false;    
    $('input[type="checkbox"]:checked').each(function(){
            var css=$(this).val();                    
            $div=$div.filter('.'+css);

        check=true;
    })

    if(check==true) $div.show();    
}

根据复选框显示某些类的div

2 个答案: