jQuery 필터 목록 앵커 태그가있는 2 기준 기준

Question

두 가지 기준 (과일 유형 및 색상)으로 목록을 필터링하는 jQuery 필터를 작성합니다. 예를 들어 사용자가 과일 유형 "베리"로 필터링하면 딸기 만 표시됩니다. 그런 다음 과일 색 "Red"로 필터링하면 빨간 열매 만 표시됩니다.

내 fruitColor 및 fruitType 변수가 설정되는 방식에 문제가 있다고 생각합니다. 그 변수의 값을 클릭 한 앵커 태그의 데이터 유형과 동일하게 만들려고합니다. 내 코드는 다음과 같습니다. 감사합니다!

jQuery를 :

$(document).ready(function() 
     { 
      $("ul.filter li a").click(function() 
      { 
       var fruitColor = $('ul#fruitColor li a').attr('data-value'); 
       var fruitType = $('ul#fruitType li a').attr('data-value'); 
       var fruitColorSelector = ''; 
       var fruitTypeSelector = '';   

       if (fruitColor == "all" && fruitType == "all") 
       { 
        //show all items 
        $(".item").show(); 
       } 
       else 
       { 
        if (fruitType != "all") 
        { 
         fruitTypeSelector = '.' + fruitType 
        } 

        if (fruitColor != "all") 
        { 
         fruitColorSelector = '.' + fruitColor 
        } 

        $(".item").hide(); 
        $(fruitTypeSelector + fruitColorSelector).show(); 
       } 

      }); 
     }); 

HTML :

Select Color Category: 
<ul class="filter" id="fruitColor"> 
    <li><a data-value="all">Any Color</a></li> 
    <li><a data-value="red">Red</a> </li> 
    <li><a data-value="blue">Blue</a> </li> 
    <li><a data-value="yellow">Yellow</a> </li> 
</ul> 
<br> 
Select Fruit Type: 
<ul class="filter" id="fruitType"> 
    <li><a data-value="all">Any Type</a> </li> 
    <li><a data-value="fruit">Fruit</a> </li> 
    <li><a data-value="berry">Berry</a> </li> 
</ul> 


<br> 



<ul> 
    <li class="item red fruit">Apple</li> 
    <li class="item blue fruit">Grape</li> 
    <li class="item yellow fruit">Lemon</li> 
    <li class="item red fruit">Cherry</li> 
    <li class="item yellow fruit">Banana</li> 
    <li class="item red berry">Strawberry</li> 
    <li class="item blue berry">Blueberry</li> 
    <li class="item red berry">Raspberry</li> 
    <li class="item yellow fruit">Pineapple</li> 
    <li class="item yellow berry">Yellowberry</li> 
</ul> 

Answer 1

변경 JS을의 가치를 얻을 것이다 :

$(document).ready(function() 
     { 
      $("ul.filter li a").click(function() 
      { 
       $(this).closest('ul').find('a').removeClass('selected'); 
       $(this).addClass('selected'); 
       var fruitColor = $('ul#fruitColor li a.selected').data('value'); 
       var fruitType = $('ul#fruitType li a.selected').data('value'); 
       var fruitColorSelector = ''; 
       var fruitTypeSelector = '';   

       if (fruitColor == "all" && fruitType == "all") 
       { 
        //show all items 
        $(".item").show(); 
       } 
       else 
       { 
        if (fruitType != "all") 
        { 
         fruitTypeSelector = '.' + fruitType 
        } 

        if (fruitColor != "all") 
        { 
         fruitColorSelector = '.' + fruitColor 
        } 

        $(".item").hide(); 
        $(fruitTypeSelector + fruitColorSelector).show(); 
       } 

      }); 
     }); 

의 핵심은 뭔가 선택한 앵커를 표시합니다. addClass/removeClass를 사용하여 작업을 수행했습니다.

Answer 2

if (fruitType != "all") 
{ 
    fruitTypeSelector = '.' + fruitType ; // need semi colon 
} 

if (fruitColor != "all") 
{ 
     fruitColorSelector = '.' + fruitColor ; // needs a semi colon 
} 

구문 오류 - 실종 SEM-콜론 (위 참조) 내가 수 샨스뿐만 아니라 당신이

Answer 3

올바른 생각 코드의 일부 주요 결함.

작성한 코드는 항상 값이있는 선택의 경우 실제로 작동 할 수 있습니다.

그러나 $('ul#fruitColor li a')는 당신에게 모든 앵커를 제공하고 당신은 항상 같은 외모로 첫 번째 항목