0

下のフィルター メニューを使用してフィルターを作成し、メニュー リストをフィルター処理する方法を教えてください。

フィルター メニュー:

  • じゃがいも
  • チキン
  • ご飯
  • キュウリ
  • 魚
  • ハム
  • ミルク

食事リスト:

<div class="potato chicken rice cucumber fish">Meal 1</div>
<div class="ham milk cucumber fish">Meal 2</div>
<div class="chicken">Meal 3</div>
<div class="potato  fish">Meal 4</div>
<div class="potato rice cucumber fish">Meal 5</div>

基本的に、たとえば、ユーザーが「チキン」を選択した場合chicken、配列(フィルター)に追加して、フィルター配列と同様のクラスを持つメニューリストからの食事のみを表示するようにします。この場合は「チキン」 "。次に、ユーザーが「魚」を選択した場合、同じことを繰り返して、配列内の共有クラス (この場合は「魚」と「鶏肉」) を持つ食事のみを表示するようにします。

4

2 に答える 2

2

この例では、フィルター オプションにチェックボックスを使用しています。これが役立つことを願っています... http://jsfiddle.net/ahmon_abilar/yVNP6/

$('input[name=filter]').on('click', function(){
    var strFilter = "";
    $.each($('input[name=filter]:checked'), function(i){
        strFilter += "." + $(this).val();
    });
    $('div').hide();
    $('div'+strFilter).show();
});
于 2012-10-18T10:27:48.837 に答える
1

更新された例は次のとおりです: http://jsfiddle.net/Jn67S/7/

ボタンをクリックして、要素をフィルター配列に追加/削除します。結果は、配列内の要素の少なくとも 1 つを含むメニューです。

これで何かできることを願っています。

編集：ここにコードがあります：

var filterarray = [];
$(".filterbutton").click(function() {
    var tempFilter = $(this).attr("value");
    if (filterarray.indexOf(tempFilter) == -1) {
    filterarray.push(tempFilter);
    } else {      
     filterarray.splice(filterarray.indexOf(tempFilter),1); 
    }
    if (filterarray.length > 0) {
        filter();
    } else {
        showAllElements();
    }
});

function filter() {
    var selector = "";
    for (i = 0; i < filterarray.length; i ++) {
        selector += "." + filterarray[i];
        if (i!=filterarray.length - 1) {
         selector += ", "; // Remove this line if you want results contain all ingredients in filter array
        }
    }
    if (filterarray.length > 0) {
        hideAllMenus();
        $("#menus").find(selector).show(); 
    }    
}

function hideAllMenus() {
    $(".menu").hide();
}

function showAllElements() {
    $(".menu").show();
}

そしてHTML：

<input type="button" value="potato" class="filterbutton"></input>
<input type="button" value="chicken" class="filterbutton"></input>
<input type="button" value="rice" class="filterbutton"></input>
<input type="button" value="cucumber" class="filterbutton"></input>
<input type="button" value="fish" class="filterbutton"></input>
<input type="button" value="ham" class="filterbutton"></input>
<input type="button" value="milk" class="filterbutton"></input>   


<div id="menus">
<div class="menu potato chicken rice cucumber fish">Meal 1</div>
<div class="menu ham milk cucumber fish">Meal 2</div>
<div class="menu chicken">Meal 3</div>
<div class="menu potato  fish">Meal 4</div>
<div class="menu potato rice cucumber fish">Meal 5</div>
</div>
于 2012-10-18T10:12:55.773 に答える