1

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

基本上我已经整理了一个快速的电子商务示例。有不同过滤器的列表，带有值。然后是产品。每个产品 div 都应用了许多类，例如“green”或“adult”或“wool”——这些是可过滤的参数。

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

  1. 从显示所有开始
  2. 如果用户选择 GREEN，则所有没有 GREEN 属性的项目都是display:none'd（带有淡入淡出的过渡
  3. 代表 #2 检查任何属性

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

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

不确定是否有更好的代码方式来做到这一点......数据属性可能吗？

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

4

2 回答 2

2

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

演示：小提琴

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();
        }
    });
});
于 2013-04-22T14:25:30.207 回答
0

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/

于 2013-04-22T14:32:44.533 回答