如何创建多重过滤器库

Question

产品红色小的属性为尺寸小，但不是中等。

产品红色中等的属性为中等，但不是小。

如果同时选中了两个属性的复选框，则插件会检查是否存在具有属性 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');                            
                    });                        

基本上，您需要从选择器中删除“，”。如果您有一个接一个的类且没有空格，则只有具有所有这些类的元素才适合选择。因此，在构建类变量的位置，删除“，”