Question

我一直致力于创建一个允许按流派调用电影的页面（参见下面的代码）。目前，我有一个代码几乎完全按照它应该如何工作：当我选中＆＃34; Comedy，＆＃34;它成功地归还了所有拥有＆＃34;喜剧＆＃34;作为他们的一个类型，当我选中＆＃34;动画，＆＃34;它成功地返回所有具有＆＃34;动画＆＃34;作为他们的一个类型，等等。我想改变的是：此刻，如果我同时检查＆＃34;喜剧＆＃34;和＃34;动画＆＃34;盒子，我的代码返回所有有＆＃34;喜剧＆＃34;作为一种类型和所有具有＆＃34;动画＆＃34;作为一种流派。我希望它只返回两者＆＃34;喜剧＆＃34;和＆＃34;动画＆＃34;在他们的类型中。我希望这是我已经存在的代码中的一个简单调整，但我找不到能够成功模拟我想要的效果的资源（我发现的最接近的代码是基于多个条件进行过滤的代码示例必须是不同类型[即一种类型，一种评级和一种运行时]），并且我尝试混合不同的代码并不成功。提前感谢您提供的任何帮助！非常感谢！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sarah's Movie TYGERRSSSS - Search by Genre</title>
<link rel="stylesheet" href="Stylesheets/NewThing.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

<body>
<a href="TYGERRSSSS_Search.html"><img id="arrow" src="Images/ArrowOrange.PNG" /></a>
<h1>Search by Genre</h1>
<h2>Genres:</h2><span></span><div id="filters">
    <label class="labels" for="Adventure">Adventure</label><input id="Adventure" type="checkbox" value="Adventure" />
    <label class="labels" for="Animation">Animation</label><input id="Animation" type="checkbox" value="Animation" />
    <label class="labels" for="Comedy">Comedy</label><input id="Comedy" type="checkbox" value="Comedy" />
    <label class="labels" for="Family">Family</label><input id="Family" type="checkbox" value="Family" />
</div>
<hr/>
<div class="products">
<div data-group=" Adventure Animation Comedy" class="product"><p><a href="Movie_101 Dalmatians.html">101 Dalmatians</a> - Animation/Adventure/Comedy</div>
<div data-group=" Animation Family" class="product"><p><a href="Movie_101 Dalmatians II- Patch's London Adventure.html">101 Dalmatians II: Patch's London Adventure</a> - Animation/Family</div>
<div data-group=" Advertisement History" class="product"><a href="Movie_1001 Classic Commercials.html">1001 Classic Commercials</a> - Advertisement/History</div>
</div>

<script type="text/javascript">

$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
  $('.product').hide();
    $('input[type="checkbox"]:checked').each(function() {
$('div[data-group*=' + this.value + ']').fadeIn();
    });
} else {
    $('.products > div').fadeIn();

}
});
</script>
</body>

</html>

Answer 1

你可以使用jQuery的filter()函数（http://api.jquery.com/filter/）：

$('.product').hide();        
$('div[data-group]').filter(function() {
  var dataGroup = $(this).attr('data-group');
  var result = true;
  $('input[type="checkbox"]:checked').each(function(item) {
    if (dataGroup.search(this.value) === -1) {
      result = false;
    }
  });
  return result;
}).fadeIn();

plunker：http://plnkr.co/edit/0E6YovZBHNyUhhdWFjJI?p=preview

如何使此复选框 - 排序代码仅返回与所有选中条件匹配的结果？

1 个答案: