javascript - 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。如果选择Epson，则选择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() 语句，使用 every 循环遍历 :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>