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/