Question

寻找有关如何编写函数以过滤掉某些类的某些div的帮助。

基本上我把quick e-commerce example放在了一起。有不同的过滤器列表，带有值。有产品。每个产品div都有许多类别，例如“绿色”或“成人”或“羊毛” - 这些是可过滤的参数。

对JS一点也不精明我正在尝试写点什么，但寻找一些建议。这基本上就是我所追求的：

首先显示所有
如果用户选择绿色，则所有没有绿色属性的项目为display:none'd（带淡入淡出过渡
检查任何属性的代表＃2

注意：可以检查多个属性，当取消选中项目时，一切都需要重新出现。

有任何帮助吗？我想它基本上将每个复选框的值链接到类。

不确定是否有更好的代码方式来执行此操作...数据属性可能？

代码here的工作示例（显然没有JS）

Answer 1

更新了您的小提琴并添加了一些jQuery来隐藏类与所选复选框不匹配的div。

演示：fiddle

JS有点冗长，如果您愿意，可以进一步重构：

$(document).ready(function() {
    var allSelectedClasses;
    allSelectedClasses = '';
    $('input[type="checkbox"]').click(function(){
        //ensure the correct classes are added to the running list
        if(this.checked){
            allSelectedClasses += '.' + $(this).val();
        }else{
            allSelectedClasses = allSelectedClasses.replace($(this).val(), '');
        }        
        //format the list of classes
        allSelectedClasses = allSelectedClasses.replace(' ', '');
        allSelectedClasses = allSelectedClasses.replace('..', '.');
        var selectedClasses;
        var allSelected;
        allSelected = '';

        //format these for the jquery selector
        selectedClasses = allSelectedClasses.split(".");
        for(var i=0;i < selectedClasses.length;i++){
            var item = selectedClasses[i];
            if(item.length > 0){
                if(allSelected.length == 0){
                    allSelected += '.' + item;
                }else{
                    allSelected += ', .' + item;
                }
            }
        }
        //show all divs by default
        $("div.prodGrid > div").show();
        //hide the necessary ones, include the 2 top level divs to prevent them hiding as well
        if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").hide();
        }
    });
});

Answer 2

我为你的Colors ul添加了一个新课程。希望没关系。

这是过滤功能的原始版本，它只考虑颜色，因此您必须自己修改它以考虑所有因素，但基本大纲就在那里。

可以大量重构！：）

因为你正在使用jQuery：

$('ul.colorFilter li input[type="checkbox"]').click(function(){
    var checkedBoxes = $('ul.colorFilter li input[type="checkbox"]:checked');
    var listOfClasses = [];
    checkedBoxes.each(function(index, el){
        listOfClasses.push(el.value);
    });
    if(listOfClasses.length >= 1){
        $('div.prodGrid').children('div').hide();

        for(var i = 0; i < listOfClasses.length; i++){
            $('div.prodGrid > div.'+listOfClasses[i]).show();
        }
    } else {
        $('div.prodGrid > div').show();
    }
});

我也做了一个小提琴：

http://jsfiddle.net/Z9ZVk/4/

使用jQuery基于类过滤div

2 个答案: