基于不同数据属性的多级DOM过滤问题

Question

I am working on this demo . How can I enrich my code to have multi level filtering system based on different existing and potential upcoming data attributes?

As you can see I am trying to filter the .box based on two data attributes shape and color but my code is filtering the DOM separately. How can I fix this?

$('input:checkbox[name=shape]').on('change', function() {
   if ( $('input:checkbox[name=shape]:checked').length > 0)
   {
      $(".box").each(function(){
         $(this).removeClass('fadeInLeft').addClass('fadeOutLeft').css('display','none').css('display','none');
      });
      let data = [];
      $('input:checkbox[name=shape]:checked').each(function() {
         data.push($(this).data('shape'));
      });
      console.log(data);

      $.each(data, function(index, value){
         $('.box[data-shape="'+value+'"]').removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
      });
   }
   else
   {
      $(".box").each(function(){
         $(this).removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
      }); 
   }

});

$('input:checkbox[name=color]').on('change', function() {
   if ( $('input:checkbox[name=color]:checked').length > 0)
   {
      $(".box").each(function(){
         $(this).removeClass('fadeInLeft').addClass('fadeOutLeft').css('display','none').css('display','none');
      });

      let data = [];
      $('input:checkbox[name=color]:checked').each(function() {
         data.push($(this).data('color'));
      });


      $.each(data, function(index, value){
         $('.box[data-color="'+value+'"]').removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
      });
   }
   else
   {
      $(".box").each(function(){
         $(this).removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block');
      }); 
   }

});

Answer 1

You can save the checked condition as an array of objects and iterate all the .box .

 $("input:checkbox").on('change', function() { let condition = []; // save all the conditions that being checked $.each($("input:checkbox:checked"), function(ele, index) { let $this = $(this); let name = $this.attr('name'); let data = $this.data(name); condition.push({ name, data }); }) // hide all box $(".box").removeClass('fadeInLeft').addClass('fadeOutLeft').css('display','none'); // iterate all box to check if matches any of the conditions if (condition.length != 0) { $('.box').each(function() { let $box = $(this); let checked = condition.find(x=> $box.data(x.name) == x.data ) != null; if(checked){ $box.removeClass('fadeOutLeft').addClass('fadeInLeft').css('display','block'); } }) } }) 

 body { padding: 40px; } .box { float: left; margin: 10px; } .red { background: red; } .green { background: green; } .yellow { background: yellow; } .diamond { height: 60px; text-align: center; transform: rotate(45deg); width: 60px; } .circle { height: 60px; border-radius: 50%; width: 60px; } .square { height: 60px; width: 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="js-shape"> <input type="checkbox" name="shape" data-shape="square">square <input type="checkbox" name="shape" data-shape="circle">circle <input type="checkbox" name="shape" data-shape="diamond">diamond </div> <div class="js-color"> <input type="checkbox" name="color" data-color="red">Red <input type="checkbox" name="color" data-color="yellow">yellow <input type="checkbox" name="color" data-color="green">green </div> <div class="row"> <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green circle" data-shape="circle" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow circle" data-shape="circle" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow square" data-shape="square" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green diamond" data-shape="diamond" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red square" data-shape="square" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red diamond" data-shape="diamond" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="70">70</div> <div class="col-md-2 animated box red circle" data-shape="circle" data-color="red" data-size="70">70</div> <div class="col-md-2 animated box green square" data-shape="square" data-color="green" data-size="71">71</div> <div class="col-md-2 animated box yellow diamond" data-shape="diamond" data-color="yellow" data-size="70">70</div> </div> 

BTW, IMO, I prefer using class instead of using data-* .