gpt4 book ai didi

javascript - 用于过滤产品的 Jquery

转载 作者:行者123 更新时间:2023-11-30 09:33:29 26 4
gpt4 key购买 nike

我有这个过滤产品的 jquery 插件

 (function($) {

'use strict';

var $filters = $('.filter [data-filter]'),
$boxes = $('.boxes [data-cat]');

$filters.on('click', function(e) {
e.preventDefault();
var $this = $(this);

$filters.removeClass('active');
$this.addClass('active');

var $filterColor = $this.attr('data-filter');

if ($filterColor == 'all') {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.addClass('is-animated').fadeIn();
});
} else {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.filter('[data-cat = "' + $filterColor + '"]')
.addClass('is-animated').fadeIn();
});
}
});

})(jQuery);

[data-cat] 是类别但有些产品属于多个类别,过滤器不适用于它们。如果该类别是您单击过滤器按钮的唯一类别(如果产品有 2 个类别,例如机票和渡轮票,则单击机票过滤器按钮根本不会显示该产品)并且不会显示项目包含其类别中的机票,而不仅仅是包含机票的项目

<div class="cta filter">
<a class="blue-btn btn" data-filter="all" href="#" >All</a>
<a class="blue-btn btn" data-filter="Airtickets" href="#" role="button">Airtickets</a>
<a class="blue-btn btn" data-filter="Ferry" href="#" role="button">Ferry</a>
</div>

最佳答案

可能你需要这样的东西:

(function($) {

'use strict';

var $filters = $('.filter [data-filter]'),
$boxes = $('.boxes [data-cat]');

$filters.on('click', function(e) {
e.preventDefault();
var $this = $(this);

$filters.removeClass('active');
$this.addClass('active');

var $filterColor = $this.attr('data-filter');

if ($filterColor == 'all') {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.addClass('is-animated').fadeIn();
});
} else {
$boxes.removeClass('is-animated')
.fadeOut().promise().done(function() {
$boxes.filter(function(i,el){
return el.dataset.cat.split(',').indexOf($filterColor)!==-1;
})
.addClass('is-animated').fadeIn();
});
}
});

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cta filter">
<a class="blue-btn btn" data-filter="all" href="#" >All</a>
<a class="blue-btn btn" data-filter="cat1" href="#" role="button">Cat1</a>
<a class="blue-btn btn" data-filter="cat2" href="#" role="button">Cat2</a>
<a class="blue-btn btn" data-filter="cat3" href="#" role="button">Cat3</a>


<ul class="boxes">
<li data-cat="cat1,cat2">cat1 & cat2</li>
<li data-cat="cat2">cat2</li>
<li data-cat="cat3">cat3</li>
</ul>
</div>

关于javascript - 用于过滤产品的 Jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44942400/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com