Question

以下功能允许用户按data-attributes过滤产品，并同时适应多个值的过滤。如何显示每个选项旁边的潜在结果数on load？理想情况下，我还想显示他们运行的每次搜索的结果总数。

我在这里发布了一个功能实例的小提琴：http://jsfiddle.net/chayacooper/hSwcr/1/

    var selected = { color: [], style: [] };   
    $('.filterOptions').on("change", ":checkbox", function (e) {
        var type = $(e.delegateTarget).data("type");
        var $this = $(this);
        var attrValue = $this.data(type);
        if ($this.parent().hasClass("active")) {
            $this.parent().removeClass("active");
            selected[type].splice(selected[type].indexOf(attrValue),1);
        }
        else {
            $this.parent().addClass("active");
            selected[type].push(attrValue);
        }            
        var checked = $(":checked", ".filterOptions");            
        // show all of the available options if...
        if (checked.length == 0 || checked.filter(".all").length > 0) {
            $('#content').find('*').show();
        } 
        else {
            $("#content").find("*").hide();
            for (var key in selected) {
                $.each(selected[key], function(index,item) {
                    $('#content').find('[data-' + key + ' *="' + item + '"]').show();
                });
            }
        }
    });

Answer 1

根据您当前的实现，您可以在复选框更改事件处理程序中的“for in”循环中执行此操作：

for (var key in selected) {
            $.each(selected[key], function(index,item) {
                var $products = $('#content').find('[data-' + key + ' *="' + item + '"]'),
                    totalCount = $products.length;

                $.each($products, function(idx, product){
                      //implement logic for running count for product options                    
                });

                //implement logic to append count to options and display totalCount


                $products.show();
            });
        }

但是我建议退一步为所有具有属性和属性值的产品创建JS Object Literal，以便您可以将数据与UI分开。对于您的数据，您可以使用像underscore.js这样的库来查询数据以获得总结果，过滤产品并计算每个选项的潜在总数。对于UI（HTML），您可以使用模板框架（如mustache.js，handlebars.js，knockout.js等）来绑定查询的数据。恕我直言，它将使你的生活更加轻松。

示例JS对象：

{ products: [
    {
        product: "Sleeveless, V-Neck, Black, Red", 
        attributes : [
         {
               attributeName: "color",
               attributeValue: "Red"
         },
         {
               attributeName: "color",
               attributeValue: "Black"
         },
         {
               attributeName: "style",
               attributeValue: "V-Neck"
         },
         {
               attributeName: "style",
               attributeValue: "Sleeveless"
         }
      ]
  },

  //etc.....

  ]
}

显示过滤器旁边的结果数量

1 个答案: