如何創建woocommerce / ecommerce產品過濾器之類的多過濾器庫

Question

我需要像woocommerce /電子商務產品過濾器這樣的多過濾器庫

這是三種類型的過濾器下拉菜單COLOR ， SIZE和SHAPE

例如，如果我選擇顏色： 紅色和綠色 ，尺寸： 小 ，形狀： 圓形

因此，它應該過濾哪些框具有以下類別red + small + round ，哪些框具有以下類別green + small + round

我需要在過濾器名稱行中顯示選定的過濾器名稱

 <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> 

Answer 1

希望它能解決您的問題。 完美地工作。 刪除您的js代碼，並包括此代碼。

 (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>