我正在尝试构建以下功能:
该网页具有定义电影特征的复选框，例如“喜剧”、“戏剧”、“英语”、“西类牙语”。当用户单击其中一个复选框时，具有相同类的 div 将显示在页面上。
这是我在以合理的方式实现时遇到困难的部分: 如果用户选择第二个复选框，则显示的 div 应该进一步“过滤”。换句话说，如果用户首先选择“drama”，然后选择“english”，则只有那些具有两个类的 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>最佳答案
也许更简单的解决方案
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();
}
关于javascript - 根据复选框显示具有某些类别的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27053182/