gpt4 book ai didi

javascript - jQuery 产品数量?

转载 作者:行者123 更新时间:2023-12-03 01:08:54 25 4
gpt4 key购买 nike

我在 jQuery 中创建了一个很好的字母过滤器,看起来效果很好。它正在工作:http://staging.morningsidepharm.com/products/generic-medicines/

本质上,它位于产品列表的顶部,然后在您单击某个字母时对其进行过滤。这是它使用的代码:

// Alphabetical Filter for Products

var $boxes = jQuery('.elementor-posts-container > .elementor-post');

var $btns = jQuery('.alphabet-btn').click(function() {
var id = this.id;
if (id == 'all') {
$boxes.show()
} else {
$boxes.hide().filter(function() {
var re = new RegExp('^' + id, 'i');
return re.test($(this).text().trim());
}).show()
}
$btns.removeClass('alphabet-active');
$(this).addClass('alphabet-active');
});

连同此 HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="alphabet-active alphabet-btn alphabet-all" id="all">Show All</button>
<button class="alphabet-btn" id="a">A</button>
<button class="alphabet-btn" id="b">B</button>
<button class="alphabet-btn" id="c">C</button>
<button class="alphabet-btn" id="d">D</button>
<button class="alphabet-btn" id="e">E</button>
<button class="alphabet-btn" id="f">F</button>
<button class="alphabet-btn" id="g">G</button>
<button class="alphabet-btn" id="h">H</button>
<button class="alphabet-btn" id="i">I</button>
<button class="alphabet-btn" id="j">J</button>
<button class="alphabet-btn" id="k">K</button>
<button class="alphabet-btn" id="l">L</button>
<button class="alphabet-btn" id="m">M</button>
<button class="alphabet-btn" id="n">N</button>
<button class="alphabet-btn" id="o">O</button>
<button class="alphabet-btn" id="p">P</button>
<button class="alphabet-btn" id="q">Q</button>
<button class="alphabet-btn" id="r">R</button>
<button class="alphabet-btn" id="s">S</button>
<button class="alphabet-btn" id="t">T</button>
<button class="alphabet-btn" id="u">U</button>
<button class="alphabet-btn" id="v">V</button>
<button class="alphabet-btn" id="w">W</button>
<button class="alphabet-btn" id="x">X</button>
<button class="alphabet-btn" id="y">Y</button>
<button class="alphabet-btn" id="z">Z</button>

还有这个CSS:

.alphabet-btn {
height: 30px;
width: 30px;
font-size: 16px;
border-radius: 0;
border: none;
font-weight: 100;
background-color: #1b91c3;
color: #ffffff;
padding: 0;
text-decoration: none;
margin: 5px 0 0 0;
}

.alphabet-btn:hover {
background-color: #134583;
}

.alphabet-active {
background-color: #134583;
text-decoration: none;
}


.alphabet-all {
width: 100px;
}

我见过一些更复杂的过滤器,当您将鼠标悬停在它们上方时,它们会提供产品计数,如下所示:

enter image description here

有人知道如何将此功能添加到我现有的过滤器中吗?

我想我需要一些东西来计算加载时的每个字母,然后在悬停时显示它......我什至不确定我所采取的方法是否可行?

非常感谢任何帮助:)

非常感谢!

最佳答案

您可以使用现有的基础知识在页面加载时计算每个字母的数量。

循环所有字母元素,过滤匹配的框并获取该集合的长度。然后在每个字母中附加或添加另一个元素,并添加一些样式来定位它并将其舍入等

$('.alphabet-btn').each(function() {
var id = this.id;

var count = $boxes.filter(function() {
var re = new RegExp('^' + id, 'i');
return re.test($(this).text().trim());
}).length

$(this).append('<span class="count">' + count +'</span>')
});

您还可以使用它向每个框添加一个类,例如 box_a、box_c、...box_z 等,并通过查找匹配的类来简化其他过滤

关于javascript - jQuery 产品数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52280337/

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