Question

这是我前面提到的question的后续行动。我希望我的用户能够按流派和颜色过滤书籍。

它还没有按照我的意图工作。当用户从封面颜色中选择Horror和Blue时，我希望它显示Blue中可用的所有恐怖书籍。相反，它只是展示所有恐怖书籍（不论颜色）和所有蓝皮书（不论类型）。

<div class="books">
  <div class="filter">
    <ul class="genre">
      <li><a href="#" data-filter=".classic" href="#">Classic</a></li>
      ...
    </ul>

    <ul class="colour">
      <li><a href="#" class="grey" data-filter=".grey" href="#">Grey</a></li>
      ...
    </ul>
  </div>

  <ul class="library">
    <li class="book horror red">Horror<br>in Red</li>
    ...
    </ul>
</div>

我正在使用一些Javascript，因此当用户从过滤器列表中选择一种类型或颜色时，它会为该类型或颜色之外的所有书籍添加一类.hidden。

if($('.books').length){
  var books = $('.books');
  books.find('.filter ul a').on('click', function(e){
    e.preventDefault();                             
    $(this).toggleClass('active'); 
    books.find('.book').addClass('hidden'); 

    books.find('.filter ul a.active').each( 
        function(){
            var selector = $(this).attr('data-filter');
            books.find(selector).removeClass('hidden'); 
        }
    );        
  });
}

我在这里有一个有效的演示：http://codepen.io/realph/pen/atImc

我相信我必须以某种方式改变JS所以它显示所有“蓝色恐怖”书而不是所有“蓝色”书和所有“恐怖”书籍。任何人都可以帮助解释如何做到这一点？非常感谢。

提前致谢！

Answer 1

试试这个

演示：http://codepen.io/anon/pen/HIeGx

jQuery(document).ready(function($) {
  if($('.books').length){
    var books = $('.books');
    books.find('.filter ul a').on('click', function(e){
      e.preventDefault();                             
      $(this).toggleClass('active'); 
      books.find('.book').addClass('hidden'); 
      var selectors = ""; // Declaration
      books.find('.filter ul a.active').each( 
          function(){
              var selector = $(this).attr('data-filter');
            selectors += selector; // Collecting
          }
      );  
      books.find(selectors).removeClass('hidden'); //Assign
    });
  }
});

收集所有选择器并在hidden声明

后删除课程each

<强>更新

 if(books.find('.filter ul a.active').length < 1) {
        books.find('.book').removeClass('hidden');

在

之后添加以下行

books.find(selectors).removeClass('hidden'); //Assign

完整代码：

jQuery(document).ready(function($) {
  if($('.books').length){
    var books = $('.books');
    books.find('.filter ul a').on('click', function(e){
      e.preventDefault();                             
      $(this).toggleClass('active'); 
      books.find('.book').addClass('hidden'); 
      var selectors = ""; // Declaration
      books.find('.filter ul a.active').each( 
          function(){
              var selector = $(this).attr('data-filter');
            selectors += selector; // Collecting
          }
      );  
      books.find(selectors).removeClass('hidden'); //Assign
      if(books.find('.filter ul a.active').length < 1) {
        books.find('.book').removeClass('hidden');
    });
  }
});

Javascript按类型和颜色过滤书籍

1 个答案: