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

Question

我正在研究this demo。如何根据不同的现有和潜在的即将来临的数据属性来丰富我的代码，使其具有多层过滤系统？

如您所见，我正在尝试根据两个数据属性.box和shape来过滤color，但是我的代码正在分别过滤DOM。我该如何解决？

$('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');
      }); 
   }

});