1

以下の関数を使用すると、ユーザーは で製品を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();
                });
            }
        }
    });
4

1 に答える 1

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();
            });
        }

ただし、一歩下がって、UI からデータを分離できるように、属性と属性値を持つすべての製品に対して JS オブジェクト リテラルを作成することをお勧めします。データについては、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.....

  ]
}
于 2013-04-16T06:53:22.490 に答える