的jQuery - 基於從點擊過濾器選項和集裝箱元素匹配的值過濾元件值

Question

更新2：

非常感謝你們的幫助。雖然這三種解決方案都有效，但我喜歡Bill的可讀性和性能。與往常一樣，我對這裏的專業水平和幫助感到驚訝。真的很感謝幫助。

UPDATE：

把演示了對的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裏面顯示所有匹配的或者這是不可能的，還有另一種方式嗎？

希望這是有道理的，有人可能會有一些建議！ 謝謝。

Answer 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/;

Answer 2

爲什麼不簡單地隱藏想要過濾的產品？

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

請參閱http://jsfiddle.net/2Sduq/1/。

Answer 3

對於「所有品牌」，紓困。對於特定的品牌名稱，無條件隱藏所有產品容器，然後選擇性地淡入符合標準的那些容器。

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

見update of your fiddle

注意jQuery的.closest()如何避免醜陋.parent().parent().parent()。

.stop()是預防性的，以防萬一fadeout()已經在元素上運行。如果這是動畫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"); 
    }); 
}); 

見further update to fiddle