jquery - 頁面問題的HTML元素過濾

Question

我創建了一個JavaScript過濾器，但並非所有的時間都在工作。要首先看到這一行動，請訪問以下link。在左側，點擊「品牌型號」下的Bridgestone e6鏈接。它什麼都不返回，但實際上它應該返回視圖中的3個產品。

過濾器的工作方式如下。我抓住邊欄上單擊的項目的值，然後搜索主視圖中的html元素以查看是否有任何匹配。如果有的話，我只會在視圖中顯示這些產品，並隱藏其餘部分。

是完成這個功能的JavaScript是（你也可以看到它here）：

是它的一些空白問題，或者在我的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(); 
      } 
    } 
}); 

Answer 1

的問題是，它是混合的情況下。在該菜單中，它表示普利司通e6，但在頁面上表示Bridgestone E6，帶有大寫字母E.要麼搜索我們時確保它們在菜單和頁面上相等，則必須使所有內容均爲小寫。