Question

我正在尝试使用多个字段集中的复选框来切换许多div的可见性，每个字段集中的每个字段集都有一个ID对应于div上的类。我对jQuery并不是很熟悉，但我几乎让它工作了。问题是我希望每个字段集的选中值在AND基础而不是OR上运行。这是我目前的jQuery：

$(function () {
  $(':checkbox').change(function () {                
     $('.'+this.id).toggle(this.checked);
  }).change();
});

JS fiddle

当您在小提琴中勾选日期01和日期03时，两个节目都会出现，这是正确的。但是，如果您还检查Venue 01，则显示＃2仍然显示，因为日期3仍然为真（即使场地1不为真）。在这种情况下，我很难让节目＃2消失（因为它不在场地1中，即使它在第3天）。

实际的字段集（有5个）包含大量动态生成的选项，所以如果可能的话，我宁愿不使用一堆if语句/其他手动输入的代码。

Answer 1

好！因此，您需要分步执行此操作，因为您确实需要AND和OR，这会创建可能的过滤矩阵。

如此简单的方法是选择所有节目，然后慢慢地敲掉每个不符合标准的节目。

这是一个有效的例子：

http://jsfiddle.net/MLJ4Q/4/

如果您有其他过滤器，则必须将其扩展。甚至可以将其放入循环中以获得较小的代码，但对于初学者来说这是最容易理解的。

$(function () {
  $(':checkbox').change(function () {                

       // we need to do this in steps, so first we need to get a string of classes for each filter
      var dates = $('.dates input:checked').map(function(){ return "." + this.value; }).get().join();
      var venues = $('.venues input:checked').map(function(){ return "." + this.value; }).get().join();
      var genres = $('.genres input:checked').map(function(){ return "." + this.value; }).get().join();


        // start with all shows
      var shows =  $('.show');

      // filter for dates if we need to
      if(dates) {
          shows = shows.filter(dates);
      }

      // filter for venues if we need to
      if(venues) {
        shows = shows.filter(venues);
      }

      // filter for genres if we need to
      if(genres) {
          shows = shows.filter(genres);
      }

      // hide everything      
      $('.show').hide();
      // show the ones we want. Pun intended
      shows.show();
      console.log(shows.length);



  });
});

使用AND运算符基于多个复选框切换div的可见性

1 个答案: