jquery - 페이지 발행시 html 요소 필터링

Question

항상 작동하지만 항상 작동하는 javascript 필터를 만들었습니다. 이것을 실제로 보시려면 link을 방문하십시오. 왼쪽에서 "Brand Model"아래의 Bridgestone e6 링크를 클릭하십시오. 아무것도 반환하지 않지만 실제로는 뷰에서 3 개의 제품을 반환해야합니다.

필터의 작동 방식은 다음과 같습니다. 사이드 바에서 클릭 한 항목의 값을 가져온 다음 기본보기에서 html 요소를 검색하여 일치하는 항목이 있는지 확인합니다. 있다면, 나는 그 제품을보기에만 보여주고 나머지는 숨 깁니다.

가 일부 공백 문제 나 내 JS에서 잘못된 무언가가이 돌봐

자바 스크립트 (또한 당신이 그것을 here를 볼 수 있습니다)인가? 나는 아무 쓸모없는 jQuery trim 함수를 사용하려고했다.

자바 스크립트는 :

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

문제는 혼합 된 경우가 있다는 것이다. 메뉴에서 Bridgestone e6이라고 말하면서 페이지 상단에 E.라는 대문자가있는 Bridgestone E6이 표시됩니다. 검색 할 때 모두 소문자로 만들어야합니다. 메뉴와 페이지에서 모두 동일해야합니다.