[英]jquery - filter elements based on matched values from clicked filter option and container element values
更新2:
非常感谢你们的帮助。 虽然所有三种解决方案都有效,但我在可读性和性能方面都喜欢Bill。 一如既往,我对这里的专业水平和帮助感到惊讶。 真的很感激帮助。
更新:
将演示放在jsfiddle上: http : //jsfiddle.net/FC4QE/17/
我需要创建一个过滤器。 用户点击品牌名称链接,如果匹配,我需要过滤掉其他产品。 该品牌包含在产品名称中,因此我正在搜索匹配项,如果有一个或多个,我需要隐藏其他产品。
我有以下javascipt / jquery代码:
$(function(){
$('#filter-by-brand li a').click(function(){
// get html string of clicked item
var brandNameSelected = $(this).html();
var productContainer = $('#product-collection div.productBoxWrapper');
// reset products in the view
if (brandNameSelected == 'All Brands'){
productContainer.fadeIn("slow");
}
// for each product title (a tag)
$("#product-collection h4 a").each(function(){
var productTitle = jQuery(this).html();
// if item clicked is contained inside product title, hide all
// products and only show the ones where the title matched
if(productTitle.indexOf(brandNameSelected) != -1){
// hide container of all products, this hides all products
productContainer.fadeOut("slow");
// then show only ones that match. the problem is that only the one product is
// displayed since we're inside the .each. How can I show all products where product title contains the item clicked?
$(this).parent().parent().parent().parent().fadeIn("slow");
}
});
});
});
我在代码中的注释中解释了所有内容,但基本上,当代码工作时,因为我显示了单击项目的产品包含在.each方法中,它只显示最后匹配的项目。 如何在.each中显示所有匹配的内容,或者这是不可能的,还有另一种方法吗?
希望这是有道理的,有人可能会有一些建议! 谢谢。
对于“所有品牌”,纾困。 对于特定的品牌名称,无条件地隐藏所有productContainers然后选择性地淡化符合标准的那些。
$(function() {
$('#filter-by-brand li a').click(function() {
var brandNameSelected = $(this).html();
var productContainer = $('#product-collection .product-container');
if (brandNameSelected == 'All Brands') {
productContainer.fadeIn("slow");
return;
}
productContainer.hide();
$("#product-collection h4 a").each(function() {
var productTitle = $(this).html();
if(productTitle.indexOf(brandNameSelected) != -1) {
$(this).closest(".product-container").stop().fadeIn("slow");
}
});
});
});
查看小提琴的更新
注意jQuery的.closest()
如何避免丑陋的.parent().parent().parent()
。
.stop()
是预防性的,以防fadeout()
已在元素上运行。 如果这是动画productContainers的唯一代码,则没有必要。
编辑...
或者为了简洁和高效,通过明智地使用jQuery的.filter
您可以在一个语句中完成几乎所有操作(尽管可读性受损):
$(function() {
$('#filter-by-brand li a').click(function() {
var brandNameSelected = $(this).html();
$('#product-collection').find('.product-container').hide().end().find('h4 a').filter(function() {
return (brandNameSelected == 'All Brands') || ($(this).html().indexOf(brandNameSelected) != -1);
}).closest(".product-container").stop().fadeIn("slow");
});
});
请参阅进一步更新以提琴
我从这里得到了最好看的结果:
$('#filter-by-brand li a').click(function()
{
var brandNameSelected = $(this).html();
var productContainer = $('#product-collection .product-container');
if (brandNameSelected == 'All Brands')
{
productContainer.fadeIn("slow");
}
else {
$(".product-container")
.fadeOut(100)
.delay(100)
.filter(function() {
return $(this).html().indexOf(brandNameSelected) > -1;
})
.each(function(index, item) {
$(item).fadeIn("slow");
});
}
});
为什么不简单地隐藏您想要过滤的产品?
if(productTitle.indexOf(brandNameSelected) == -1)
{
$(this).parent().parent().parent().fadeOut("slow");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.