Javascript jQuery仅显示单选按钮中具有多个匹配类的div

我试图创建一个系统，通过隐藏和显示适当的项来过滤一些标记。这个想法是，您可以选择一个单选按钮，它将仅显示与单选按钮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>

---

任何帮助都将不胜感激

这里需要更改

each（）

语句，使用each循环执行

：checked

单选按钮，然后根据这些值构造Jquery选择器：

jQuery（文档）.ready（函数（）{
$（'.prodFilter'）.one（“单击”，函数（）{
$（'.prdbx'）.hide（）；
});
$（'.prodFilter'）。单击（函数（e）{
$（'.prdbx'）.hide（）；
var thisFilter=“”；
$（'.prodFilter:checked'）。每个（函数（e）{
thisFilter+='.'+this.id；
});
$（thisFilter.show（）；
});
});

烙印
类型
产品A
产品B
产品C
产品D
产品E
这里需要的是更改
each（）
语句，使用each循环执行
：checked
单选按钮，然后根据这些值构造Jquery选择器：


jQuery（文档）.ready（函数（）{
$（'.prodFilter'）.one（“单击”，函数（）{
$（'.prdbx'）.hide（）；
});
$（'.prodFilter'）。单击（函数（e）{
$（'.prdbx'）.hide（）；
var thisFilter=“”；
$（'.prodFilter:checked'）。每个（函数（e）{
thisFilter+='.'+this.id；
});
$（thisFilter.show（）；
});
});

烙印
类型
产品A
产品B
产品C
产品D
产品E
完美！非常感谢。我真的很感激对我的方法不足之处的解释！祝你有美好的一天！很高兴帮助你mate@ihateArtistspect！非常感谢。我真的很感激对我的方法不足之处的解释！祝你有美好的一天！很高兴帮助你mate@ihateartists
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
            }
        });

    });
});