在javascript中基于多个类别隐藏和显示产品列表

Question

<div class="content" data-category="shoes" data-price="1000" data-brand="Andrew">shoe1</div><br />
<div class="content" data-category="shirts" data-price="1200" data-brand="Sunbaby">shirt1</div><br />

<div class="content" data-category="shoes" data-price="2000" data-brand="Andrew">shoe2</div><br />
<div class="content" data-category="shoes" data-price="800" data-brand="Andrew">shoe3</div><br />
<div class="content" data-category="shirts" data-price="1300" data-brand="Sunbaby">shirt2</div><br />
<div class="content" data-category="shirts" data-price="800" data-brand="Sunbaby">shirt3</div><br />

<input type="checkbox" class="category" category="shoes" id="shoes">shoes
<input type="checkbox" class="category" category="shirts" id="shirts">shirts
<input type="radio" name="range" value="0-9000" checked>All
<input type="radio" name="range" value="0-999">0-1000
<input type="radio" name="range" value="1000-2000">1000-2000

基本上，如果您从复选框中选择一个类别，比如说鞋子，那么应该只显示带有鞋子的 div。然后，如果您使用价格、一些开始和结束限制过滤结果，它应该显示鞋子类别 div 落在该特定范围内，而不是超出该范围。 在这两者之间，如果您还选择品牌复选框。那么它应该匹配来自类别、品牌和价格范围的所有三个复选框

例如：- 我们选择了鞋子复选框，它应该显示鞋子 div；那么如果我们选择范围为 1000-2000，那么它应该显示 shoe1 和 shoe2 而不是 shoe3。

如果你选择了鞋子类别，然后如果你也选择了品牌复选框。它应该在两个复选框的基础上过滤掉，然后它应该寻找价格范围并匹配结果，过滤div。

请帮忙。

<script type="text/javascript">
$("input.category").prop("checked", true).change(function (e) {
    $("input[name=range]:checked").trigger("change");
});
$("input.brand").prop("checked", true).change(function (e1) {
    $("input[name=range]:checked").trigger("change");
});

$("input[name=range]").change(function (e) {
    var toggle = this.checked;
    var range = this.value.split('-');
    var rangeFrom = parseInt(range[0]);
    var rangeTo = parseInt(range[1]);
    $(".content[data-price]").each(function(){
        var $this = $(this);
        var categoryActive = $("#" + $this.data("category")).prop("checked");
        var brandActive = $("#" + $this.data("brand")).prop("checked");
        var price = parseFloat($this.data('price'));
        $this.toggle(price >= rangeFrom && price <= rangeTo && categoryActive);
      $this.toggle(price >= rangeFrom && price <= rangeTo && $("#" + $this.data("brand")).prop("checked"));
    });
});

</script>

我在一个好友的帮助下尝试了这个脚本。 感谢和谷歌，如果你能在这方面提供帮助

Answer 1

Solution

HTML

<form id="filter">
  <div>
    <input type="checkbox" 
           name="brand" 
           value="Andrew" 
           checked>Andrew
    </input>
    <input type="checkbox" 
           name="brand" 
           value="Sunbaby" 
           checked>Sunbaby
    </input>
    <input type="checkbox" 
           name="brand" 
           value="Nike" 
           checked>Nike
    </input>
  </div>
  <div>
    <input type="checkbox" 
           name="category" 
           value="shoes" 
           checked>Shoes
    </input>
    <input type="checkbox" 
           name="category" 
           value="shirts" 
           checked>
      Shirts
    </input>
  </div>
  <div>
    <input type="radio" 
           name="price" 
           value="0-9000"         
           checked>All
    </input>
    <input type="radio" 
           name="price" 
           value="0-999">0-1000
    </input>
    <input type="radio" 
           name="price" 
           value="1000-2000">1000-2000
    </input>
  <div> 
</form>

CSS

.hidden {display: none;}

JS/JQUERY

var filterContentForm = function(content, form){  
  var filter = function() {  
    var checkBoxGroups = {},
        radioGroups = {};
    var addRadioGroup = function(name){
      radioGroups[name] = {      
        el: $('input[name='+name+']:checked')
      };
      var n = radioGroups[name];
      n.el
      .each(function(){
        n.range = $(this).val().split('-');
        n.from = Number(n.range[0]);
        n.to = Number(n.range[1]);      
      });
    };      
    $('#filter input[type=radio]')
    .each(function(){
      addRadioGroup($(this).attr('name'));
    });      
    var addCheckBoxGroup = function(name){
      checkBoxGroups[name] = {
        el: $('input[name='+name+']:checked'),      
        ch: []
      };
      var n = checkBoxGroups[name];
      n.el.each(function(){
        n.ch.push($(this).val());
      });
    };
    $('#filter input[type=checkbox]')
    .each(function(){
      addCheckBoxGroup($(this).attr('name'));
    });
    var contents = $(content), all = 0;
    contents.removeClass('hidden')
    .each(function(){
      var $this = $(this),
          price = $this.data('price');
      for(var c in radioGroups){ 
        var n = radioGroups[c],
            d = Number($this.data(c));
        if(d < n.from || d > n.to){
          $this.addClass('hidden');
          all++;
          return;
        }
      }    
      var show = 0, i;
      for(var c in checkBoxGroups){   
        var n = checkBoxGroups[c], 
            d = $this.data(c);      
        for(i = 0; i < n.ch.length; i++){        
          if(d === n.ch[i]) {
            show++; break;
          }
        } 
      }
      var l = Object.keys(checkBoxGroups).length;
      if(show < l) {
        $this.addClass('hidden');
        all++;
      }
    });
    if(all > contents.length - 1) 
      contents.removeClass('hidden');
  };
  $(form+' input').change(filter);
  filter();
};
filterContentForm('.content', '#filter'); 

Answer 2

你可以这样做：

$("#shoes").click(function (e) {
 $('.content[data-category=shoes]').toggle();
});