jQuery顯示從單選按鈕與多個匹配類只有div

Question

我想創建一個系統來通過隱藏和顯示適當的項目來篩選一些標籤。這個想法是，你可以選擇一個單選按鈕，它將只顯示與單選按鈕ID匹配的類的div。如果您選擇多個單選按鈕，它將使用全部的選擇ID創建類匹配。

這裏是標記我現在有：

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

<h2>Type</h2> 
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" /> 
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" /> 

<div class="prdbx brnd_Epson typ_Genuine">Product A</div> 
<div class="prdbx brnd_Canon typ_Genuine">Product B</div> 
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div> 
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div> 
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div> 

我有一些jQuery的是正確地獲取ID，但它沒有顯示正確的div。如果選擇愛普生，那麼Genuine，所有Genuine產品都會顯示;而不是只有正品愛普生產品。

jQuery的我有這麼遠低於：

jQuery(document).ready(function(){ 

    $('.prodFilter').one("click", function() { 
     $('.prdbx').hide(); // hide all products 
    }); 

    // we clicked a filter 
    $('.prodFilter').click(function(e){ 

     // for each clicked filter 
     $('.prodFilter').each(function(e) { 
      if($(this).is(":checked")){ 
       var thisFilter = this.id; 
       $('.'+thisFilter).show(); // display the chosen products 
      } 
     }); 

    }); 
}); 

任何幫助將不勝感激！

Answer 1

你所需要的就是改變你的each()聲明，只是通過:checked單選按鈕使用每個循環，然後從這些數值構建您的jQuery選擇：

jQuery(document).ready(function() { 
 
    $('.prodFilter').one("click", function() { 
 
    $('.prdbx').hide(); 
 
    }); 
 
    $('.prodFilter').click(function(e) { 
 
    $('.prdbx').hide(); 
 
    var thisFilter = ""; 
 
    $('.prodFilter:checked').each(function(e) { 
 
     thisFilter += '.'+this.id; 
 
    }); 
 
    $(thisFilter).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Brand</h2> 
 
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Canon" /> 
 
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Epson" /> 
 
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_HP" /> 
 
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Lexmark" /> 
 
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Xerox" /> 
 

 
<h2>Type</h2> 
 
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" /> 
 
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" /> 
 

 
<div class="prdbx brnd_Epson typ_Genuine">Product A</div> 
 
<div class="prdbx brnd_Canon typ_Genuine">Product B</div> 
 
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div> 
 
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div> 
 
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div>