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

Question

我想创建一个系统来通过隐藏和显示适当的项目来筛选一些标签。

当.brandFilter被点击时，它需要使用复选框的ID来显示div。点击.prodFilter时，它需要显示相应的颜色，但不显示任何取消选择的ID（除非没有被选中，在这种情况下显示与颜色匹配的所有内容）。

现在，当我点击Epson和惠普它的作品;但是当我点击红色时，它会显示不需要的红色Lexmark产品;当我选择品牌时，它已经被过滤掉了。理想情况下，单击#brnd_HP，#brnd_Epson和#typ_Red将显示产品A和F.

取消选择过滤器应该“撤消”以前的任何工作。

下面是标记我现在有：jQuery的并不如预期运作

<h2>Brand</h2> 
    <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> 
    <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> 
    <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> 
    <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> 
    <input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> 

<h2>Color</h2> 
    <input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> 
    <input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" /> 

<div class="prdbx brnd_Epson typ_Red">Product A</div> 
<div class="prdbx brnd_Canon typ_Red">Product B</div> 
<div class="prdbx brnd_Epson typ_Blue">Product C</div> 
<div class="prdbx brnd_Lexmark typ_Red">Product D</div> 
<div class="prdbx brnd_Canon typ_Blue">Product E</div> 
<div class="prdbx brnd_HP typ_Red">Product F</div> 

，但是这是我到目前为止所。我似乎无法用像这样的多个参数来切换像查看类似于切换可见性的性质。惠普/爱普生部分工作正常，但一旦颜色被引入，它只是显示与颜色ID有关的所有内容。

<script> 

    jQuery(document).ready(function(){ 

     $('.brandFilter').click(function(e) { 
      $('.brandbx').hide(); 
      var thisFilter = ""; 
      $('input[name=brandFilter]:checked').each(function(e) { 
       thisFilter += '.'+this.id; 
      }); 
      $(thisFilter).show(); 
     }); 

     // when a filter is clicked 
     $('.prodFilter').click(function(e) { 
      $('.prdbx').hide(); // hide all products 
      var thisFilter = ""; 
      var thisCounter = 0; 
      // for each clicked filter 
      $('.prodFilter:checked').each(function(e) { 
       thisFilter += '.'+this.id; 
       $('.'+this.id).show(); // show the products matching filter 
       thisCounter++; 
      }); 
      if(thisCounter == 0){ 
       $('.prdbx').show(); // if no clicked filters, show all products 
       $('.brandbx').show(); 
      } 
     }); 
    }); 
</script> 

Answer 1

您需要合并过滤器，这意味着以某种方式从第一个复选框中持久化过滤器。这工作。

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 +佳能蓝色等。

Answer 2

我可能不理解所需的功能，因为在我的代码中没有一个产品在开始时显示。

HTML：

<h2>Brand</h2> 
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> Canon 
<br /> 
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> Epson 
<br /> 
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> HP 
<br /> 
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> Lexmark 
<br /> 
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> Xerox 
<br /> 

<h2>Color</h2> 
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> Red 
<br /> 
<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/