1

常に機能しているわけではありませんが、JavaScript フィルターを作成しました。この動作を最初に確認するには、次のリンクにアクセスしてください。左側で、「ブランド モデル」の下にあるブリヂストン e6 リンクをクリックします。何も返されませんが、実際にはビューで 3 つの製品が返されるはずです。

フィルタの仕組みは次のとおりです。サイドバーでクリックされたアイテムの値を取得し、メイン ビューで html 要素を検索して、一致するものがあるかどうかを確認します。ある場合は、それらの製品のみをビューに表示し、残りを非表示にします。

これを処理する JavaScript は次のとおりです (ここでも確認できます)。

私のJSで空白の問題や何かが間違っていますか? jQuery のトリム関数を使用しようとしましたが、役に立ちませんでした。

ジャバスクリプト：

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 に答える