How to create multi-filter gallery like woocommerce/ecommerce product filter

问题: I need a multifilter gallery like woocommerce/ecommerce product filter here is three type filter dropdown COLOR, SIZE and SHAPE for example If I will select color: re...

问题:

I need a multifilter gallery like woocommerce/ecommerce product filter

here is three type filter dropdown COLOR, SIZE and SHAPE

for example If I will select color: red and green, size: small and shape: round

So it should filter which boxes have following classes red+small+round and which boxes have following classes green+small+round

and I need to show selected filter name in filter name line

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="multifilter-gallery-wrap">
       <div class="row">
          <div class="col-sm-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                
                 <ul class="multifilter-gallery-nav nav">
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Color</a>
                       <ul class="dropdown-menu not-close-dropdown" data-display="static">
                          <li class="multifilter-gallery-button color" data-filter="red">
                             <input type="checkbox" value="on">
                             Red                                                                 
                          </li>
                          <li class="multifilter-gallery-button color" data-filter="green">
                             <input type="checkbox" value="on">
                             green                                                                 
                          </li>
                       </ul>
                    </li>
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">Size</a>
                       <ul class="dropdown-menu not-close-dropdown">
                          <li class="multifilter-gallery-button size" data-filter="small">
                             <input type="checkbox">
                             Small                     
                          </li>
                          <li class="multifilter-gallery-button size" data-filter="medium">
                             <input type="checkbox">
                             Medium                  
                          </li>
                       </ul>
                    </li>
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">shape</a>
                       <ul class="dropdown-menu not-close-dropdown">
                          <li class="multifilter-gallery-button shape" data-filter="square">
                             <input type="checkbox">
                             square                     
                          </li>
                          <li class="multifilter-gallery-button shape" data-filter="round">
                             <input type="checkbox">
                             round                  
                          </li>
                       </ul>
                    </li>
                    <li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
                 </ul>
            </nav>

            <p class="shape-name"> shape: (here will show the selected shape name)</p>
            <p class="color-name"> color: (here will show the selected color name)</p>
            <p class="size-name"> Size: (here will show the selected Size name)</p>
             <div class="row mt-5">
                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
                    <div class="bg-danger m-2" style="height: 180px; width: 180px;">
                        <h2 class="text-white">Red Small square</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
                   <div class="bg-success m-2" style="height: 200px; width: 200px;">
                        <h2 class="text-white">green medium round</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
                   <div class="bg-danger m-2" style="height: 200px; width: 200px;">
                        <h2 class="text-white">Red medium round</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
                   <div class="bg-success m-2" style="height: 180px; width: 180px;">
                        <h2 class="text-white">green Small square</h2>
                   </div>
                </div>

             </div>
             <!--end portfolio grid -->
          </div>
       </div>
    </div>
</div>

    <script type="text/javascript">
        
    (function ($) {

    $(document).ready(function() {

        // venue filter script
        $(".multifilter-gallery-button").click(function(){
            var value = $(this).attr('data-filter');
            
            if(value == "all")
            {
                $(this).addClass("active");
                $(".multifilter-gallery-button").not(this).removeClass('active').find('input[type="checkbox"]').attr('checked',false);
                $('.multifilter-gallery-box').show('1000');
            }
            else
            {
                $('.multifilter-gallery-button.active[data-filter="all"]').removeClass('active');

                if ($(this).hasClass("active")) {
                    $(this).removeClass("active");
                    $(this).find('input[type="checkbox"]').attr('checked',false);
                }else{
                    $(this).addClass("active");
                    $(this).find('input[type="checkbox"]').attr('checked',true);
                }

                if($('.multifilter-gallery-button.active').length){
                    var classes = '';
                    $('.multifilter-gallery-button.active').each(function(index, el) {
                        classes += '.'+$(this).attr('data-filter');                            
                    }); 

                    $(".multifilter-gallery-box").not(classes).hide('3000');
                    $('.multifilter-gallery-box').filter(classes).show('3000');
                }else{
                    $('.multifilter-gallery-button[data-filter="all"]').click();
                }
            }
        });

        $('ul.not-close-dropdown').on('click', function (event) {
           event.stopPropagation();
        });

    ///////////

    })
    })(jQuery);
   </script>


回答1:

hope it will solve your problem. works perfectly. remove your js code, and include this one.

(function ($) {
    $(document).ready(function() {
      $('.multifilter-gallery-button').click(function(){
        var value = $(this).data('filter');
        if(value == 'all'){
          $('.multifilter-gallery-button').removeClass('active');
          $('.multifilter-gallery-button input[type="checkbox"]').prop('checked', false);
          $(this).addClass('active');
          $('.multifilter-gallery-box').show();
          $('.size-name').html('Size : '+'All');
          $('.color-name').html('Color : '+'All');
          $('.shape-name').html('Shape : '+'All');
        }else{
          $('.multifilter-gallery-button[data-filter="all"]').removeClass('active');
          $('.multifilter-gallery-box').hide();
          if($(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).find('input[type="checkbox"]').prop('checked', false);
          }else{
            $(this).addClass('active');
            $(this).find('input[type="checkbox"]').prop('checked', true);
          }
          var colors = $('.multifilter-gallery-button.color.active');
          var sizes = $('.multifilter-gallery-button.size.active');
          var shapes = $('.multifilter-gallery-button.shape.active');
          var colorsArray = $.map( colors, function( val, i ) {
            return $(val).data('filter');
          });
          var sizesArray = $.map( sizes, function( val, i ) {
            return $(val).data('filter');
          });
          var shapesArray = $.map( shapes, function( val, i ) {
            return $(val).data('filter');
          });
          
          var combinations = [];
          if(colorsArray.length > 0){
            var colorsTexts = $.map( colors, function( val, i ) {
              return $(val).text();
            });
          	$('.color-name').html('Color : '+colorsTexts.join(', '));
          	combinations = colorsArray;
          }else{
          	$('.color-name').html('Color : '+'No color selected');
          }
          if(sizesArray.length > 0){
            var sizesTexts = $.map( sizes, function( val, i ) {
              return $(val).text();
            });
          	$('.size-name').html('Size : '+sizesTexts.join(', '));
          	if(combinations.length > 0){
          		var tempCombinations = combinations;
          		combinations = [];
          		$.each($(tempCombinations), function(i, c){
	              $.each($(sizesArray), function(ii, sz){
	                var combination = [c, sz];
	                combinations.push(combination);
	              });
	          	});
          	}else{
          		combinations = sizesArray;
          	}
          }else{
          	$('.size-name').html('Size : '+'No size selected');
          }
          if(shapesArray.length > 0){
            var shapesTexts = $.map( shapes, function( val, i ) {
              return $(val).text();
            });
          	$('.shape-name').html('Shape : '+shapesTexts.join(', '));
          	if(combinations.length > 0){
          		var tempCombinations = combinations;
          		combinations = [];
          		$.each($(tempCombinations), function(i, c){
          			if($.isArray(c)){
          				$.each($(shapesArray), function(ii, s){
							var combination = $.merge([s], c);
							combinations.push(combination);
						});
          			}else{
          				$.each($(shapesArray), function(ii, s){
							var combination = [c, s];
							combinations.push(combination);
						});
          			}
	          	});
          	}else{
          		combinations = shapesArray;
          	}
          }else{
          	$('.shape-name').html('Shape : '+'No shapes selected');
          }
          
          //show boxes
          if(combinations.length > 0){
          	$.each($(combinations), function(i, val){
          		if($.isArray(val)){
          			var classes = val.join('.');
              		$('.multifilter-gallery-box'+'.'+classes).show();
          		}else{
          			$('.multifilter-gallery-box'+'.'+val).show();
          		}
            });
          }else{
            $('.multifilter-gallery-button[data-filter="all"]').click();
          }

        }
       
      });

    })
  })(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
    <div class="multifilter-gallery-wrap">
       <div class="row">
          <div class="col-sm-12">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                
                 <ul class="multifilter-gallery-nav nav">
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Color</a>
                       <ul class="dropdown-menu not-close-dropdown" data-display="static">
                          <li class="multifilter-gallery-button color" data-filter="red">
                             <input type="checkbox" value="on">
                             Red                                                                 
                          </li>
                          <li class="multifilter-gallery-button color" data-filter="green">
                             <input type="checkbox" value="on">
                             green                                                                 
                          </li>
                       </ul>
                    </li>
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">Size</a>
                       <ul class="dropdown-menu not-close-dropdown">
                          <li class="multifilter-gallery-button size" data-filter="small">
                             <input type="checkbox">
                             Small                     
                          </li>
                          <li class="multifilter-gallery-button size" data-filter="medium">
                             <input type="checkbox">
                             Medium                  
                          </li>
                       </ul>
                    </li>
                    <li class="nav-item dropdown">
                       <a href="#" class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true" data-display="static">shape</a>
                       <ul class="dropdown-menu not-close-dropdown">
                          <li class="multifilter-gallery-button shape" data-filter="square">
                             <input type="checkbox">
                             square                     
                          </li>
                          <li class="multifilter-gallery-button shape" data-filter="round">
                             <input type="checkbox">
                             round                  
                          </li>
                       </ul>
                    </li>
                    <li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
                 </ul>
            </nav>

            <p class="shape-name"> shape: (here will show the selected shape name)</p>
            <p class="color-name"> color: (here will show the selected color name)</p>
            <p class="size-name"> Size: (here will show the selected Size name)</p>
             <div class="row mt-5">
                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
                    <div class="bg-danger m-2" style="height: 180px; width: 180px;">
                        <h2 class="text-white">Red Small square</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
                   <div class="bg-success m-2" style="height: 200px; width: 200px;">
                        <h2 class="text-white">green medium round</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
                   <div class="bg-danger m-2" style="height: 200px; width: 200px;">
                        <h2 class="text-white">Red medium round</h2>
                   </div>
                </div>

                <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
                   <div class="bg-success m-2" style="height: 180px; width: 180px;">
                        <h2 class="text-white">green Small square</h2>
                   </div>
                </div>

             </div>
             <!--end portfolio grid -->
          </div>
       </div>
    </div>
</div>

  • 发表于 2019-02-13 13:59
  • 阅读 ( 210 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除