如何使用数组和jQuery创建可过滤菜单

Question

请您使用下面的过滤器菜单来帮助我创建过滤器以过滤菜单列表？

过滤菜单：

• 马铃薯
• 鸡肉
• 大米
• 黄瓜
• 鱼
• 火腿
• 牛奶

餐清单：

<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添加到数组（过滤器）中，以便它仅显示菜单列表中的餐点，其类别与过滤器数组相似这个情况"鸡"。然后，如果用户选择"鱼"，我想要重复同样的事情，以便它只会在阵列中与共享课程展示餐点，在这种情况下为"鱼"one_answers"鸡肉"。

Answer 1

此示例使用复选框用于过滤器选项。希望这可以帮助...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();
});

Answer 2

这是更新的示例：http：//jsfiddle.net/jn67s/7/

单击按钮将元素添加到过滤器数组中。结果是菜单包含数组中至少一个元素。

希望您能为此做些事情。

编辑：这是代码：

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>