1

このコードを入手したこのリンクを見つけました：

$(document).ready(function(){     
    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        //prevent the default behaviour of the link  
        e.preventDefault();       
        //get the id of the clicked link(which is equal to classes of our content  
        var filter = $(this).attr('id');      
        //show all the list items(this is needed to get the hidden ones shown)  
        $('#content ul li').show();       
        /*using the :not attribute and the filter class in it we are selecting 
        only the list items that don't have that class and hide them '*/  
        $('#content ul li:not(.' + filter + ')').hide();      
    });       
});

うまくいきましたが、選択ボタンでこのコードを使用しています。オプションを選択すると、正常にフィルタリングされます。しかし、私は複数の選択 (実際には 5 つ) を持っていますが、この状況でのアプローチ方法がわかりません。

例:
アイテム: イチゴ、リンゴ、チェリー、オレンジ、バナナ、グレープ
1 を選択 - すべての果物、赤い色、緑色など
2 を選択 - すべての形、丸みを帯びた形、三角形の形。
3 を選択 - すべて別のもの、別のもの

ユーザーは最初に赤の色を選択できます - 最初のフィルター。
それから彼は丸みを帯びたものを選ぶことができたので、リンゴとチェリーが答えになるでしょう.

既に表示されている画像のみをフィルタリングしようとしましたが、情報を戻そうとするとエラーが発生しました。

結果がリンゴとチェリーの同じ例で、ユーザーがすべての果物を選択した場合、結果はリンゴ、チェリー、オレンジ、グレープでなければなりません。

いくつかのアドバイス？

以下にコード例を示します 。フィルターは分離された方法で動作していることに注意してください。

4

1 に答える 1

1

いじられた：

http://jsfiddle.net/iambriansreed/turMe/

jQuery:

$(document).ready(function(){  

    var filters = {};

    //when a link in the filters div is clicked...  
    $('#filters a').click(function(e){        
        e.preventDefault();      
        filters[$(this).parent().attr('class')] = $(this).attr('id');      
        var show = $('#content ul li').filter(function(){                
            for(k in filters)
                if(
                   filters.hasOwnProperty(k) &&
                   !$(this).hasClass(filters[k])
                )
                return false;            
            return true;                
        });
        show.show();            
        $('#content ul li').not(show).hide();            
        $('pre').html(JSON.stringify(filters));            
    });      
}); ​

HTML

<!-- the filters div -->  
<div id='filters'>
<p>Filter One:</p>
<p class="f1" >
    <a href='#' id='allitens'>All</a>
    <a href='#' id='bestof'>Best Of</a>
    <a href='#' id='jquery'>jQuery</a>
    <a href='#' id='php'>PHP</a>
    <a href='#' id='html'>HTML</a>
    <a href='#' id='css'>CSS</a> 
</p>
<p>Filter Two: Begins with letter or Number</p>
    <p class="f2">
<a href='#' id='b1'>B</a> 
<a href='#' id='n1'>1</a>
<a href='#' id='H'>H</a>
    </p>
</div>  


    <!-- the content div -->  
    <div id='content'>  
        <!-- the unordered list where we store the content in list items -->  
        <ul>  
          ...
        </ul>  
</div>  
Filters
<pre></pre>

オブジェクトを作成し、すべてのフィルターを割り当てます。次に、基準を満たさない DOM 要素を除外します。これは、任意の数のフィルターで機能するようになりました。

この行で： 

filters[$(this).parent().attr('class')] = $(this).attr('id');

私は3つのことをしています：

  1. クリックされたリンクの親 (段落タグ) のクラス属性を取得します。$(this).parent().attr('class')
  2. クリックされたリンクの ID を取得します。
    $(this).attr('id')
  3. filters1 で定義されたキーと 2 で定義された値を使用して、オブジェクトのプロパティを追加または上書きします。
于 2012-07-11T17:56:15.810 に答える