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>

jQuery只显示来自单选按钮的多个匹配类的div

1 个答案: