jQuery篩選器列表由2標準與錨點標籤

我正在構建一個jQuery篩選器，按2套條件（水果類型和顏色）過濾列表。例如，如果用戶按水果類型「漿果」進行過濾，則只會顯示漿果。然後，如果他們按水果色「紅色」過濾，則只會顯示紅色漿果。jQuery篩選器列表由2標準與錨點標籤

我認爲問題與我的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>

來源

2013-06-27 kennycrippen

這是你的代碼的固定示例：http://jsfiddle.net/NYAmk/ – Aguardientico

更改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來完成這項工作。

來源

2013-06-27 22:59:37 Aguardientico

謝謝大家，現在就給這個鏡頭 – kennycrippen

謝謝@Aguardientico，這個伎倆。我稍微更改了HTML，以便篩選器列表中的第一項具有「已選擇」類，並且所有內容都像魅力一樣。 :) – kennycrippen

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

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

語法錯誤 - 缺少SEM-冒號（見上文）我覺得舒尚特是正確的，以及

來源

2013-06-27 22:57:40 sferret

你有代碼中的一些主要缺陷..

您所寫的代碼實際上可能適用於總是有值的select。

但$('ul#fruitColor li a')給你所有的錨，你總是會得到的第一個項目

來源

2013-06-27 22:58:21

jQuery篩選器列表由2標準與錨點標籤

回答

相關問題