如何創建多重過濾器庫

Question

產品紅色小具有屬性大小小而不是中 。

產品Red Medium具有屬性Medium BUT NOT small 。

如果兩個屬性均選中該復選框，則插件將檢查是否有屬性為small或Medium的產品 。

我需要只有產品才能顯示具有兩個選定屬性的產品。 如此小而 中 。

我該怎么做。 誰能幫助我。

 <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" data-filter="red"> <input type="checkbox" value="on"> Red </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" data-filter="small"> <input type="checkbox"> Small </li> <li class="multifilter-gallery-button" data-filter="medium"> <input type="checkbox"> Medium </li> </ul> </li> <li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li> </ul> </nav> <div class="row mt-5" > <div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small "> <div class="bg-success m-2" style="height: 200px"> <h2 class="text-white">Red Small</h2> </div> </div> <div class="col-sm-6 col-md-6 col-lg-4 multifilter-gallery-box red medium "> <div class="bg-success m-2" style="height: 200px"> <h2 class="text-white">Red medium</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) { if(index == 0){ classes += '.'+$(this).attr('data-filter'); }else{ 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

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

基本上，您所需要做的就是從選擇器中刪除“，”。 如果您有一個接一個的類且沒有空格，則只有具有所有這些類的元素才適合選擇。 因此，在構建類變量的位置，請刪除“，”