在页面问题上过滤 HTML 元素

filtering of html elements on page issue

本文关键字:过滤 HTML 元素 问题      更新时间:2023-09-26

我创建了一个可以工作的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();
            }
    }
});

问题是它是混合情况。在菜单中,它说普利司通e6,但在页面上它说普利司通E6,大写E.要么当你搜索我们的时,你必须把所有东西都变成小写,确保它们在菜单和页面上是相等的。