0

更新 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 中显示所有匹配的，或者这是不可能的，还有其他方法吗？

希望这是有道理的，并且有人可能会有一些建议！谢谢。

4

3 回答 3

1

我从中得到了最好看的结果：

$('#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");
            });


    }
});

你可以在http://jsfiddle.net/tu8tc/1/玩它；

于 2012-04-29T07:05:06.623 回答
1

对于“所有品牌”，请退出。对于特定品牌名称，无条件隐藏所有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()是预防性的，以防 afadeout()已经在元素上运行。如果这是使 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");
    });
});

请参阅小提琴的进一步更新

于 2012-04-29T06:51:47.237 回答
0

为什么不简单地隐藏您想要过滤掉的产品呢？

if(productTitle.indexOf(brandNameSelected) == -1)
{
    $(this).parent().parent().parent().fadeOut("slow");
}

请参阅http://jsfiddle.net/2Sduq/1/。

于 2012-04-29T06:34:04.543 回答