0
オブジェクトデータタグとチェックボックスの値に基づいて滑らかなスライダで特定のクラスを隠すフィルタを作成しました。クラスが隠されているときは、滑らかなスライダで作成された親コンテナを実際に隠す必要があるため、空白が残っています。Slick Slider Pluginで作成したスライドの親コンテナを削除しようとしています
例 - 最初のスライドページにあり、「トラック」を選択している場合、トラックは表示されません。しかし、次のページに行き、トラックを選択すると、すべてのトラックが表示されます。
プラグインで作成された親コンテナを隠すことができます（下記の画像を参照）。残りのスライドは適切な量のスライドとスライドページを作成します。
私は隠さなければならないクラスで出力スライダー構造の画像を追加した - Screenshot
Iフィルタと共にプラグインを挿入しました。私はまた、対処する必要があるオブジェクトを強調表示するコメントをしました。以下
参照スニペット -
//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>
男にそれをリセットするには、以下のCSSを追加します。私は週末全体でこれと闘ってきました.Jqueryで物事を試してみると、それは単純なCSSルールになりました！ありがとうsn3ll！ –
問題ありません。私たちの最善を尽くす;-) – sn3ll