1

我创建了一个 javascript 过滤器，它可以正常工作，但并非一直有效。要首先看到这一点，请访问以下链接。在左侧，单击“品牌型号”下的普利司通 e6 链接。它什么也不返回，但实际上它应该在视图中返回 3 个产品。

过滤器的工作方式如下。我抓取侧边栏上单击的项目的值，然后在主视图中搜索 html 元素以查看是否有任何匹配项。如果有，我只在视图中显示这些产品并隐藏其余产品。

处理这个问题的 javascript 是（你也可以在这里看到）：

我的 JS 中是否存在空格问题或不正确的问题？我尝试使用 jQuery 修剪功能无济于事。

的JavaScript：

var noProductMatches = jQuery('.no-products-found');

jQuery('#filter-by-brand li a').click(function() 
{
    noProductMatches.hide();

    var brandNameSelected = jQuery(this).html();
    var productVendorFromCollection = jQuery("#product-vendor");
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (brandNameSelected == 'All Brands' )
    {
        productContainer.fadeIn("slow");
    }
    else 
    {
        var results = jQuery(".productBoxWrapper")
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                return jQuery(this).html().indexOf(brandNameSelected) > -1 || jQuery(this).html().indexOf(productVendorFromCollection) > -1;  
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});

jQuery('#filter-by-model li a').click(function() 
{
    noProductMatches.hide();

    var brandNameSelected = jQuery.trim(jQuery(this).html());
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (brandNameSelected == 'Any Model' )
    {
        productContainer.fadeIn("slow");
    }
    else 
    {
        var results = productContainer
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                return jQuery.trim(jQuery(this).html()).indexOf(brandNameSelected) > -1;  
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});


jQuery('#filter-by-price li a').click(function() 
{
    noProductMatches.hide();

    var priceRangeSelectedItem = jQuery(this).html();
    var minSelectedPrice = parseInt( jQuery(this).attr("name") );
    var maxSelectedPrice = parseInt( jQuery(this).attr("title") );
    var productContainer = jQuery('#product-collection .productBoxWrapper');

    if (priceRangeSelectedItem == 'Any Price')
    {
        productContainer.fadeIn("slow");
    }
    else
    {
        var results = jQuery(".productBoxWrapper")
            .fadeOut(100)
            .delay(100)
            .filter(function() 
            {
                var minProductPrice = parseInt( jQuery(this).find("#lowestPriceRange").html() );
                var maxProductPrice = parseInt( jQuery(this).find("#highestPriceRange").html() );
                //alert(minProductPrice);
                //alert(maxProductPrice);

                return (minProductPrice >= minSelectedPrice &&  maxProductPrice <= maxSelectedPrice);
            })
            .each(function(index, item) 
            {
                jQuery(item).fadeIn("slow");
            });

            if (results.length == 0)
            {
                noProductMatches.fadeIn();
            }
    }
});
4

1 回答 1

1

问题是它是混合大小写的。在菜单中显示普利司通 e6，但在页面上显示普利司通 E6，并带有大写 E。当您搜索我们时，您必须将所有内容都设为小写，确保它们在菜单和页面上相同。

于 2012-05-18T19:09:26.547 回答