jQuery只显示匹配多个复选框参数的div

2 回答

• 0

  您需要组合过滤器，这意味着以某种方式从第一个复选框中保留过滤器 . 这有效 .

  var thisFilter1 = "";
     jQuery(document).ready(function(){
  
          $('.brandFilter').click(function(e) {
              $('.brandbx').hide();
              thisFilter1 = "";
              var sep = ""
              $('input[name=brandFilter]:checked').each(function(e) {
                  thisFilter1 = thisFilter1 + sep + '.'+this.id;
                  sep = ","
              });
              $(thisFilter1).show();
          });
  
          // when a filter is clicked
          $('.prodFilter').click(function(e) {
              $('.prdbx').hide(); // hide all products
  
              var thisCounter = 0;
              var thisFilter = "";
              var sep=""
              // for each clicked filter
              $('.prodFilter:checked').each(function(e) {
                  thisFilter = thisFilter + sep + '.' + this.id;
                  sep=","
                  thisCounter++;
              });
              if(thisCounter == 0){
                  $('.prdbx').show(); // if no clicked filters, show all products
                  $('.brandbx').show();
              }
              else {
                  $('.prdbx').each(function() {
                      if ($(this).is(thisFilter1) && $(this).is(thisFilter)){
                          $(this).show()
                      }
                  })
              }           
  
          });
      });
  

  编辑：更新了多个选择组合 . 跟jquery .is（）打个招呼 . 一个有趣的函数不返回jq对象，因此无法链接，但可以在if测试中使用 . 您现在可以使用佳能红色，蓝色或红色蓝色或HP佳能蓝色等 .

  回复于 2024-04-26T04:01:26+08:00
• 0

  我可能无法理解所需的功能，因为在我的代码中，没有产品在开头显示 .

  HTML：

  <h2>Brand</h2>
  <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> Canon
  
  
  <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> Epson
  
  
  <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> HP
  
  
  <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> Lexmark
  
  
  <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> Xerox
  
  
  
  <h2>Color</h2>
  <input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> Red
  
  
  <input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" /> Blue
  
  <div class="prdbx brnd_Epson typ_Red show">Epson Red</div>
  <div class="prdbx brnd_Canon typ_Red show">Canon Red</div>
  <div class="prdbx brnd_Epson typ_Blue show">Epson Blue</div>
  <div class="prdbx brnd_Lexmark typ_Red show">Lexmark Red</div>
  <div class="prdbx brnd_Canon typ_Blue show">Canon Blue</div>
  <div class="prdbx brnd_HP typ_Red show">HP Red</div>
  

  CSS：

  .prdbx {
    display: none;
  }
  
  .prdbx.show {
    display: block;
  }
  

  JavaScript的：

  jQuery(document).ready(function() {
    $(".brandFilter").on('change', function() {
    //Filter by brand first
      filterByBrand();
  
      //Then filter by color
      filterByProd();
    });
  
    $(".prodFilter").on('change', function() {
      filterByProd();
    });
  });
  
  function filterByBrand() {
    var $allBrands = $(".brandFilter");
  
    if (!$allBrands.filter(':checked').length) {
      //If all brand checkboxes are unchecked, show all prdbx divs
      $('.prdbx').addClass('show');
    } else {
      for (var i = 0; i < $allBrands.length; ++i) {
        var $brand = $allBrands.eq(i);
  
        //If a brand is checked show it, otherwise hide it
        if ($brand.is(':checked')) {
          $('.' + $brand.attr('id')).addClass('show');
        } else {
          $('.' + $brand.attr('id')).removeClass('show');
        }
      }
    }
  }
  
  function filterByProd() {
    var $allProdFilters = $(".prodFilter");
    var noneIsSelected = true;
  
    for (var i = 0; i < $allProdFilters.length; ++i) {
      var $prodFilter = $allProdFilters.eq(i);
      var $prod = $('.' + $prodFilter.attr('id'));
  
      //If the checkbox is checked
      if ($prodFilter.is(':checked')) {
        noneIsSelected = false;
  
        if (!$prod.hasClass('show')) {
          $prod.addClass('show');
        }
      } else {
         $prod.removeClass('show');
      }
    }
  
    //If no color is selected, filter by brand
    if (noneIsSelected) {
      filterByBrand();
    }
  }
  

  这是小提琴：https://jsfiddle.net/mehmetb/m2zLt6Lo/

  回复于 2024-04-26T04:01:26+08:00