jquery - 试图删除由 Slick Slider Plugin 制作的幻灯片的父容器

Question

我制作了一个过滤器，它根据对象数据标签和复选框的值将某个类隐藏在光滑的 slider 中。当类被隐藏时，它仍然会留下一个空白空间，因为它实际上应该隐藏由光滑 slider 制作的父容器。

示例 - 如果您在第一个幻灯片页面上选择“卡车”，则不会显示卡车。但是，如果您转到下一页并选择卡车，您将看到所有卡车。

如果我可以隐藏由插件创建的父容器(见下图)，其余的幻灯片将落到位并制作正确数量的幻灯片和幻灯片页面。

我添加了输出 slider 结构的图像以及必须隐藏的类 - Screenshot

我已将插件与过滤器一起插入。我还做了评论，突出了需要处理的对象。

请参阅下面的代码段 -

//MODEL FILTER FUNCTION

$(document).ready(function(){
  $('.mo-type-check').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0){
        $('.resultblock').fadeIn();
    }
        
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > - 1) //Check if data-tag's value is in array
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }
    });
    
});

$('.mo-slide').slick({
      dots: true,
      infinite: false,
      rows: 2,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">▸</button>',
      nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">▸</button>',
      responsive: [
        {
          breakpoint: 912,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: false,
            dots: true
          }
        }
      ]
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<ul id="filters">
                  <li>
                    <input id="check1" type="checkbox" name="check" value="convert" class="mo-type-check">
                    <label for="check1">Convertable</label>
                    <label for="check1" class="selection"></label>
                  </li>

                  <li>
                    <input id="check2" type="checkbox" name="check" value="hatch" class="mo-type-check">
                    <label for="check2">Hatchback</label>
                    <label for="check2" class="selection"></label>
                  </li>

                  <li>
                    <input id="check3" type="checkbox" name="check" value="sedan" class="mo-type-check">
                    <label for="check3">Sedan</label>
                    <label for="check3" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check4" type="checkbox" name="check" value="coupe" class="mo-type-check">
                    <label for="check4">Coupe</label>
                    <label for="check4" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check5" type="checkbox" name="check" value="suv" class="mo-type-check">
                    <label for="check5">SUV</label>
                    <label for="check5" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check6" type="checkbox" name="check" value="wag" class="mo-type-check">
                    <label for="check6">Wagon</label>
                    <label for="check6" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check7" type="checkbox" name="check" value="truck" class="mo-type-check">
                    <label for="check7">Truck</label>
                    <label for="check7" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check8" type="checkbox" name="check" value="van" class="mo-type-check">
                    <label for="check8">Van</label>
                    <label for="check8" class="selection"></label>
                  </li>
                </ul>
                
                            <div class="mo-slide" id="mo-slide">
                  <div class="resultblock" data-tag="convert">
                    <img src="img/convert.png" class="mo-img">
                    <p class="mo-desc">Convertable</p>
                  </div>

                  <div class="resultblock" data-tag="hatch">
                    <img src="img/hatchback.png" class="mo-img">
                    <p class="mo-desc">Hacthback</p>
                  </div>

                  <div class="resultblock" data-tag="sedan">
                   <img src="img/sedan.png" class="mo-img">
                    <p class="mo-desc">Sedan</p>
                  </div>
                  
                  <div class="resultblock" data-tag="coupe">
                   <img src="img/coupe.png" class="mo-img">
                    <p class="mo-desc">Coupe</p>
                  </div>
                  
                   <div class="resultblock" data-tag="suv">
                    <img src="img/suv.png" class="mo-img">
                    <p class="mo-desc">SUV</p>
                  </div>
                  
                  <div class="resultblock" data-tag="wag">
                    <img src="img/wagon.png" class="mo-img">
                    <p class="mo-desc">Wagon</p>
                  </div>
                  
                  <div class="resultblock" data-tag="truck">
                    <img src="img/truck.png" class="mo-img">
                    <p class="mo-desc">Truck</p>
                  </div>
                  
                  <div class="resultblock" data-tag="van">
                    <img src="img/van.png" class="mo-img">
                    <p class="mo-desc">Van</p>
                  </div>
                  
                  <div class="resultblock" data-tag="truck">
                    <img src="img/truck.png" class="mo-img">
                    <p class="mo-desc">Truck</p>
                  </div>
                  
                  <div class="resultblock" data-tag="van">
                    <img src="img/van.png" class="mo-img">
                    <p class="mo-desc">Van</p>
                  </div>
            </div>

Answer 1

您的容器的 min-height 为 1px。添加以下 CSS 以将其重置为 0。

.slick-initialized .slick-slide {
    min-height: 0;
}

//MODEL FILTER FUNCTION

$(document).ready(function(){
  $('.mo-type-check').on('change', function(){
    var category_list = [];
    $('#filters :input:checked').each(function(){
      var category = $(this).val();
      category_list.push(category);
    });

    if(category_list.length == 0){
        $('.resultblock').fadeIn();
    }
        
    else {
      $('.resultblock').each(function(){
        var item = $(this).attr('data-tag');
        if(jQuery.inArray(item,category_list) > - 1) //Check if data-tag's value is in array
          $(this).fadeIn('slow');
        else
          $(this).hide();
      });
    }
    });
    
});

$('.mo-slide').slick({
      dots: true,
      infinite: false,
      rows: 2,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">▸</button>',
      nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">▸</button>',
      responsive: [
        {
          breakpoint: 912,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: false,
            dots: true
          }
        }
      ]
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<style>
    .slick-initialized .slick-slide {
        min-height: 0;
    }
</style>
<ul id="filters">
                  <li>
                    <input id="check1" type="checkbox" name="check" value="convert" class="mo-type-check">
                    <label for="check1">Convertable</label>
                    <label for="check1" class="selection"></label>
                  </li>

                  <li>
                    <input id="check2" type="checkbox" name="check" value="hatch" class="mo-type-check">
                    <label for="check2">Hatchback</label>
                    <label for="check2" class="selection"></label>
                  </li>

                  <li>
                    <input id="check3" type="checkbox" name="check" value="sedan" class="mo-type-check">
                    <label for="check3">Sedan</label>
                    <label for="check3" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check4" type="checkbox" name="check" value="coupe" class="mo-type-check">
                    <label for="check4">Coupe</label>
                    <label for="check4" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check5" type="checkbox" name="check" value="suv" class="mo-type-check">
                    <label for="check5">SUV</label>
                    <label for="check5" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check6" type="checkbox" name="check" value="wag" class="mo-type-check">
                    <label for="check6">Wagon</label>
                    <label for="check6" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check7" type="checkbox" name="check" value="truck" class="mo-type-check">
                    <label for="check7">Truck</label>
                    <label for="check7" class="selection"></label>
                  </li>
                  
                  <li>
                    <input id="check8" type="checkbox" name="check" value="van" class="mo-type-check">
                    <label for="check8">Van</label>
                    <label for="check8" class="selection"></label>
                  </li>
                </ul>
                
                            <div class="mo-slide" id="mo-slide">
                  <div class="resultblock" data-tag="convert">
                    <img src="img/convert.png" class="mo-img">
                    <p class="mo-desc">Convertable</p>
                  </div>

                  <div class="resultblock" data-tag="hatch">
                    <img src="img/hatchback.png" class="mo-img">
                    <p class="mo-desc">Hacthback</p>
                  </div>

                  <div class="resultblock" data-tag="sedan">
                   <img src="img/sedan.png" class="mo-img">
                    <p class="mo-desc">Sedan</p>
                  </div>
                  
                  <div class="resultblock" data-tag="coupe">
                   <img src="img/coupe.png" class="mo-img">
                    <p class="mo-desc">Coupe</p>
                  </div>
                  
                   <div class="resultblock" data-tag="suv">
                    <img src="img/suv.png" class="mo-img">
                    <p class="mo-desc">SUV</p>
                  </div>
                  
                  <div class="resultblock" data-tag="wag">
                    <img src="img/wagon.png" class="mo-img">
                    <p class="mo-desc">Wagon</p>
                  </div>
                  
                  <div class="resultblock" data-tag="truck">
                    <img src="img/truck.png" class="mo-img">
                    <p class="mo-desc">Truck</p>
                  </div>
                  
                  <div class="resultblock" data-tag="van">
                    <img src="img/van.png" class="mo-img">
                    <p class="mo-desc">Van</p>
                  </div>
                  
                  <div class="resultblock" data-tag="truck">
                    <img src="img/truck.png" class="mo-img">
                    <p class="mo-desc">Truck</p>
                  </div>
                  
                  <div class="resultblock" data-tag="van">
                    <img src="img/van.png" class="mo-img">
                    <p class="mo-desc">Van</p>
                  </div>
            </div>