如何创建多滤镜图库

Question

产品红色小号有属性尺寸小号但不是中号.

产品 Red Medium 具有属性 Medium 但不是 small .

如果为两个属性都选中了复选框，插件会检查是否有产品具有属性 small OR Medium.

我只需要显示具有两种选定属性的产品。所以 small AND 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');                            
                    });

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

如何创建多滤镜图库

How to create Multi filter Gallery

javascript

jquery

gallery

filter