0

更新2：

どうもありがとうございました。3つのソリューションはすべて機能しましたが、読みやすさとパフォーマンスの点でBillが気に入っています。いつものように、私は専門知識のレベルに驚いており、ここで助けてくれます。本当に助けに感謝します。

アップデート：

デモをjsfiddleに載せる：http：//jsfiddle.net/FC4QE/17/

フィルタを作成する必要があります。ユーザーがブランド名のリンクをクリックし、一致するものがある場合は、他の製品を除外する必要があります。ブランドは商品名に含まれているので、一致するものを探しています。1つまたは複数ある場合は、他の商品を非表示にする必要があります。

私は次の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

「すべてのブランド」については、救済してください。特定のブランド名については、すべてのproductContainerを無条件に非表示にしてから、基準を満たすものを選択的にフェードインします。

$(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ことで、ほとんどすべてを1つのステートメントで実行できます（ただし、読みやすさは低下します）。

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

除外したい製品を単純に非表示にしてみませんか？

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

http://jsfiddle.net/2Sduq/1/を参照してください。

于 2012-04-29T06:34:04.543 に答える