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

debugcn 发表于 Dev

安蒂

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

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

这是我无法以明智的方式实现的部分：如果用户选择了第二个复选框，则显示的div应该会更多地被“过滤”。换句话说，如果用户先选择了“戏剧”，然后选择了“英语”，则只有具有两个类的div才应保持可见。

到目前为止，这是我的代码（它将简单地打开/关闭“喜剧” div）：

<!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>

dm4web

也许更简单的解决方案

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();    
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。