Question

我正在构建一个jQuery过滤器，它按2组标准（水果类型和颜色）过滤列表。例如，如果用户按水果类型“Berry”过滤，则仅显示浆果。然后，如果他们用水果颜色“红色”过滤，则只显示红色浆果。

我认为问题在于我的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-colons（见上文）我认为sushanth也是正确的

Answer 3

您的代码中存在一些重大缺陷..

您编写的代码实际上可能适用于总是具有值的select。

但$('ul#fruitColor li a')为您提供了所有锚点，您将始终获得第一项的值

jQuery过滤器列表由2个标准与锚标签

3 个答案: