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/

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

我希望你能用这个做点什么。

编辑：这是代码：

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 回答