Question

我正在尝试通过隐藏和显示相应的项目来创建一个过滤某些标签的系统。

单击.brandFilter时，需要使用复选框的id显示div。单击.prodFilter时，它需要显示相应的颜色，但不显示任何取消选择的ID（除非未选择任何ID，在这种情况下显示与颜色匹配的所有颜色）。

现在，当我点击Epson和HP时，它可以工作;但是当我点击红色时，它会显示不需要的红色利盟产品;当我选择这个品牌时，它已经过滤掉了。理想情况下，单击#brnd_HP，＃brnd_Epson和#typ_Red将显示产品A和F.

取消选择过滤器应该“撤消”之前所做的任何工作。

以下是我现在的标记：

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

<h2>Color</h2>
    <input type="checkbox"  class="prodFilter" name="typeFilter" id="typ_Red" />
    <input type="checkbox"  class="prodFilter" name="typeFilter" id="typ_Blue" />

<div class="prdbx brnd_Epson typ_Red">Product A</div>
<div class="prdbx brnd_Canon typ_Red">Product B</div>
<div class="prdbx brnd_Epson typ_Blue">Product C</div>
<div class="prdbx brnd_Lexmark typ_Red">Product D</div>
<div class="prdbx brnd_Canon typ_Blue">Product E</div>
<div class="prdbx brnd_HP typ_Red">Product F</div>

jQuery没有按预期运行，但这是我到目前为止所做的。我真的似乎无法围绕看似查询的问题，就像用这样的多个参数切换可见性一样。 HP / Epson部件工作正常，但一旦引入颜色，它只显示与颜色ID相关的所有内容。

<script>

    jQuery(document).ready(function(){

        $('.brandFilter').click(function(e) {
            $('.brandbx').hide();
            var thisFilter = "";
            $('input[name=brandFilter]:checked').each(function(e) {
                thisFilter += '.'+this.id;
            });
            $(thisFilter).show();
        });

        // when a filter is clicked
        $('.prodFilter').click(function(e) {
            $('.prdbx').hide(); // hide all products
            var thisFilter = "";
            var thisCounter = 0;
            // for each clicked filter
            $('.prodFilter:checked').each(function(e) {
                thisFilter += '.'+this.id;
                $('.'+this.id).show(); // show the products matching filter
                thisCounter++;
            });
            if(thisCounter == 0){
                $('.prdbx').show(); // if no clicked filters, show all products
                $('.brandbx').show();
            }
        });
    });
</script>

Answer 1

您需要组合过滤器，这意味着以某种方式从第一个复选框中保留过滤器。这很有效。

 var thisFilter1 = "";
   jQuery(document).ready(function(){

        $('.brandFilter').click(function(e) {
            $('.brandbx').hide();
            thisFilter1 = "";
            var sep = ""
            $('input[name=brandFilter]:checked').each(function(e) {
                thisFilter1 = thisFilter1 + sep + '.'+this.id;
                sep = ","
            });
            $(thisFilter1).show();
        });

        // when a filter is clicked
        $('.prodFilter').click(function(e) {
            $('.prdbx').hide(); // hide all products

            var thisCounter = 0;
            var thisFilter = "";
            var sep=""
            // for each clicked filter
            $('.prodFilter:checked').each(function(e) {
                thisFilter = thisFilter + sep + '.' + this.id;
                sep=","
                thisCounter++;
            });
            if(thisCounter == 0){
                $('.prdbx').show(); // if no clicked filters, show all products
                $('.brandbx').show();
            }
            else {
                $('.prdbx').each(function() {
                    if ($(this).is(thisFilter1) && $(this).is(thisFilter)){
                        $(this).show()
                    }
                })
            }           

        });
    });

编辑：针对多个选择组合进行了更新。跟jquery .is（）打个招呼。一个有趣的函数不返回jq对象，因此无法链接，但可以在if测试中使用。您现在可以使用佳能红色，蓝色或红色+蓝色或HP +佳能蓝等等。

Answer 2

我可能无法理解所需的功能，因为在我的代码中，没有产品在开头显示。

HTML：

<h2>Brand</h2>
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Canon" /> Canon
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Epson" /> Epson
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_HP" /> HP
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Lexmark" /> Lexmark
<br />
<input type="checkbox" class="brandFilter" name="brandFilter" id="brnd_Xerox" /> Xerox
<br />

<h2>Color</h2>
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Red" /> Red
<br />
<input type="checkbox" class="prodFilter" name="typeFilter" id="typ_Blue" /> Blue

<div class="prdbx brnd_Epson typ_Red show">Epson Red</div>
<div class="prdbx brnd_Canon typ_Red show">Canon Red</div>
<div class="prdbx brnd_Epson typ_Blue show">Epson Blue</div>
<div class="prdbx brnd_Lexmark typ_Red show">Lexmark Red</div>
<div class="prdbx brnd_Canon typ_Blue show">Canon Blue</div>
<div class="prdbx brnd_HP typ_Red show">HP Red</div>

CSS：

.prdbx {
  display: none;
}

.prdbx.show {
  display: block;
}

JavaScript的：

jQuery(document).ready(function() {
  $(".brandFilter").on('change', function() {
  //Filter by brand first
    filterByBrand();

    //Then filter by color
    filterByProd();
  });

  $(".prodFilter").on('change', function() {
    filterByProd();
  });
});

function filterByBrand() {
  var $allBrands = $(".brandFilter");

  if (!$allBrands.filter(':checked').length) {
    //If all brand checkboxes are unchecked, show all prdbx divs
    $('.prdbx').addClass('show');
  } else {
    for (var i = 0; i < $allBrands.length; ++i) {
      var $brand = $allBrands.eq(i);

      //If a brand is checked show it, otherwise hide it
      if ($brand.is(':checked')) {
        $('.' + $brand.attr('id')).addClass('show');
      } else {
        $('.' + $brand.attr('id')).removeClass('show');
      }
    }
  }
}

function filterByProd() {
  var $allProdFilters = $(".prodFilter");
  var noneIsSelected = true;

  for (var i = 0; i < $allProdFilters.length; ++i) {
    var $prodFilter = $allProdFilters.eq(i);
    var $prod = $('.' + $prodFilter.attr('id'));

    //If the checkbox is checked
    if ($prodFilter.is(':checked')) {
      noneIsSelected = false;

      if (!$prod.hasClass('show')) {
        $prod.addClass('show');
      }
    } else {
       $prod.removeClass('show');
    }
  }

  //If no color is selected, filter by brand
  if (noneIsSelected) {
    filterByBrand();
  }
}

这是小提琴：https://jsfiddle.net/mehmetb/m2zLt6Lo/

jQuery只显示匹配多个复选框参数的div

2 个答案: