JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<div>
      <div class="content" 
           data-category="shoes" 
           data-price="4000" 
           data-size="38" 
           data-brand="Nike">
        <img src="http://placehold.it/120x80">
        <p>Nike 38<br>$4000</p>
      </div>
      <div class="content" 
           data-category="shirts" 
           data-price="6000" 
           data-size="20"
           data-brand="Nike">
        <img src="http://placehold.it/140x80">
        <p>Nike 20<br>$6000</p>
      </div>    
      <div class="content" 
           data-category="shoes" 
           data-price="500" 
           data-size="20"
           data-brand="Andrew">
        <img src="http://placehold.it/120x80">
        <p>Andrew 20<br>$500</p>
      </div>  
      <div class="content" 
           data-category="shoes" 
           data-price="780" 
           data-size="42"
           data-brand="Andrew">
        <img src="http://placehold.it/120x80">
        <p>Andrew 42<br>$780</p>
      </div>
      <div class="content" 
           data-category="shirts" 
           data-price="1200" 
           data-size="40"
           data-brand="Sunbaby">
        <img src="http://placehold.it/140x80">
        <p>Sunbaby 40<br>$1200</p>
      </div>
      <div class="content" 
           data-category="shoes" 
           data-price="2000" 
           data-size="70"
           data-brand="Andrew">
        <img src="http://placehold.it/120x80">
        <p>Andrew 70<br>$2000</p>
      </div>
      <div class="content" 
           data-category="shoes" 
           data-price="800" 
           data-size="50"
           data-brand="Sunbaby">
        <img src="http://placehold.it/120x80">
        <p>Sunbaby 50<br>$800</p>
      </div>
      <div class="content" 
           data-category="shirts" 
           data-price="1300"
           data-size="20"
           data-brand="Nike">
        <img src="http://placehold.it/140x80">
        <p>Nike 20<br>$1300</p>
      </div>
      <div class="content" 
          ...

CSS

.hidden {display: none;}

.content {border-radius: 5px; border: 1px solid #bbb;padding: 5px; margin: 5px; float: left;}
#filter {clear: left;}

JavaScript

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'); 

$('#filter input[type=checkbox],#filter...