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。 如果选择爱普生，那么正版，所有正品产品展示; 而不是只有正版爱普生产品 。

我到目前为止的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>