我在 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;
}
我见过一些更复杂的过滤器,当您将鼠标悬停在它们上方时,它们会提供产品计数,如下所示:
有人知道如何将此功能添加到我现有的过滤器中吗?
我想我需要一些东西来计算加载时的每个字母,然后在悬停时显示它......我什至不确定我所采取的方法是否可行?
非常感谢任何帮助:)
非常感谢!
最佳答案
您可以使用现有的基础知识在页面加载时计算每个字母的数量。
循环所有字母元素,过滤匹配的框并获取该集合的长度。然后在每个字母中附加或添加另一个元素,并添加一些样式来定位它并将其舍入等
$('.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/