0

我正在构建一个 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>
4

3 回答 3

2

将 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-27T22:59:37.187 回答
1 
if (fruitType != "all") 
{ 
    fruitTypeSelector = '.' + fruitType ; // need semi colon 
 } 

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

语法错误 - 缺少分号（见上文）我认为 sushanth 也是正确的

于 2013-06-27T22:57:40.753 回答
1

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

您编写的代码实际上可能适用于始终具有值的选择。

但是$('ul#fruitColor li a')给你所有的锚，你总是会得到第一个项目的价值

于 2013-06-27T22:58:21.540 回答