0

2 セットの基準 (果物の種類と色) でリストをフィルター処理する jQuery フィルターを作成しています。たとえば、ユーザーが果物の種類「ベリー」でフィルタリングすると、ベリーのみが表示されます。次に、果物の色「赤」でフィルタリングすると、赤い実だけが表示されます。

問題は、私の 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

コードにいくつかの重大な欠陥があります..

記述したコードは、常に値を持つ select の場合に実際に機能する可能性があります。

しかし$('ul#fruitColor li a')、すべてのアンカーを提供し、常に最初のアイテムの値を取得します

于 2013-06-27T22:58:21.540 に答える