仿京東淘寶商品詳情頁屬性選擇js效果

在網上找了好久發現都不符合要求就自己摸索寫了一個，用到了linq.js這個linq to js 擴展，不然用純JS遍歷json查詢要死人啊

demo：http://123.207.28.46:8086/

效果圖：

代碼直接拷貝就可以運行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
   
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        /*sku選擇樣式*/
        li {
            list-style: none;
            margin-right: 10px;
        }

            li label {
                cursor: pointer;
            }

        li {
            float: left;
            line-height: 30px;
        }

        .clear {
            clear: both;
        }
        .AttributeValue {
            border: 1px solid #808080;
            padding: 5px 10px;
        }

        .choices {
            border-color: #e01313
        }

        .disabled {
            border: 1px dashed #b1abab;
            background-color: #f1f1f1;
        }

            .disabled label {
                cursor: not-allowed;
            }
    </style>
    <script src="http://neue.cc/linq.min.js"></script>
    <script>

        var Combination1 = { Id: 1, ProductId: 21, Attributes: ",9,13,19,21,", StockQuantity: 10, OverriddenPrice: 99 };
        var Combination2 = { Id: 2, ProductId: 21, Attributes: ",9,14,20,23,", StockQuantity: 10, OverriddenPrice: 199 };
        var Combination3 = { Id: 3, ProductId: 21, Attributes: ",10,16,19,25,", StockQuantity: 10, OverriddenPrice: 299 };
        var Combination4 = { Id: 4, ProductId: 21, Attributes: ",10,17,20,24,", StockQuantity: 10, OverriddenPrice: 299 };
        var Combination5 = { Id: 5, ProductId: 21, Attributes: ",11,17,20,24,", StockQuantity: 10, OverriddenPrice: 299 };
        var Combination6 = { Id: 6, ProductId: 21, Attributes: ",12,14,19,22,", StockQuantity: 10, OverriddenPrice: 299 };
        //list:來自數據查詢出來的商品組合屬性json數據
        var list = [];
        list.push(Combination1);
        list.push(Combination2);
        list.push(Combination3);
        list.push(Combination4);
        list.push(Combination5);
        list.push(Combination6);
        //SKU_TYPET:來自數據庫中商品屬性json數據
        var SKU_TYPET = [{ AttributeId: 7, Attribute: "顏色", AttributeValues: [{ AttributeValueId: 9, AttributeValue: "金色" }, { AttributeValueId: 10, AttributeValue: "黑色" }, { AttributeValueId: 11, AttributeValue: "銀色" }, { AttributeValueId: 12, AttributeValue: "紅色" }] }, { AttributeId: 8, Attribute: "版本", AttributeValues: [{ AttributeValueId: 13, AttributeValue: "公開版" }, { AttributeValueId: 14, AttributeValue: "原廠延保版" }, { AttributeValueId: 15, AttributeValue: "雙網通版" }, { AttributeValueId: 16, AttributeValue: "無線充套裝" }, { AttributeValueId: 17, AttributeValue: "AirPods套裝" }, { AttributeValueId: 18, AttributeValue: "分期用版" }] }, { AttributeId: 9, Attribute: "內存", AttributeValues: [{ AttributeValueId: 19, AttributeValue: "64G" }, { AttributeValueId: 20, AttributeValue: "256G" }] }, { AttributeId: 10, Attribute: "套裝", AttributeValues: [{ AttributeValueId: 21, AttributeValue: "優惠套裝1" }, { AttributeValueId: 22, AttributeValue: "優惠套裝2" }, { AttributeValueId: 23, AttributeValue: "優惠套裝3" }, { AttributeValueId: 24, AttributeValue: "優惠套裝4" }, { AttributeValueId: 25, AttributeValue: "優惠套裝5" }] }];
        $(function () {
            function ishas(AttributeValueIds) {
                var newlist = list.concat();
                var newAttributeValueIds = AttributeValueIds;
                for (var i = 0; i < newAttributeValueIds.length; i++) {
                    newlist = Enumerable.From(newlist).Where(function (x) {
                        return x.Attributes.indexOf(newAttributeValueIds[i]) > -1;
                    }).ToArray();
                }
                if (newlist.length > 0) {
                    return true;
                } else {
                    return false;
                }
            }
            init(SKU_TYPET);
            //init:綁定商品屬性數據
            function init(SKU_TYPET) {
                var SKU_TYPE = "";
                $.each(SKU_TYPET, function (index, item) {
                    SKU_TYPE += '<ul class="SKU_TYPE"> <li sku-type-name="' + item.Attribute + '">' + item.Attribute + '：</li></ul>';
                    SKU_TYPE += "<ul>";
                    $.each(item.AttributeValues, function (i, childitem) {
                        var AttributeValueIdsArry = [];
                        AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
                        if (!ishas(AttributeValueIdsArry)) {
                            SKU_TYPE += '<li class="AttributeValue  disabled" data-AttributeId="' + item.AttributeId + '" data-AttributeValueId="' + childitem.AttributeValueId + '"><label>' + childitem.AttributeValue + '</label></li>';
                        } else {
                            SKU_TYPE += '<li class="AttributeValue  available" data-AttributeId="' + item.AttributeId + '" data-AttributeValueId="' + childitem.AttributeValueId + '"><label>' + childitem.AttributeValue + '</label></li>';
                        }

                    });
                    SKU_TYPE += "</ul>";
                    SKU_TYPE += '<div class="clear"></div>';
                });

                $("#show").html(SKU_TYPE);
            }
            //Attribute:已選擇的商品屬性集合[{ AttributeId: 7, AttributeValueId: 9 }]
            var Attribute = [];
           //取消已選擇屬性點擊事件
            $("body").on("click", ".choices", function (event) {
                $(this).removeClass("choices");
                $(this).addClass("available");
                var AttributeId = $(this).attr("data-AttributeId");
                var AttributeValueId = $(this).attr("data-AttributeValueId");
                //從Attribute刪除已選擇屬性
                var itemIndex = 0;
                $.each(Attribute, function (index, item) {
                    if (item.AttributeId == parseInt(AttributeId)) {
                        itemIndex = index;
                    }
                });
                Attribute.splice(itemIndex, 1);
                //重新綁定
                $.each(SKU_TYPET, function (index, item) {
                    $.each(item.AttributeValues, function (i, childitem) {
                        var newAttributeValueIds = Enumerable.From(Attribute).Select(function (x) { return x.AttributeValueId }).ToArray();
                        var AttributeValueIdsArry = [];
                        $.each(Attribute, function (i, it) {
                            AttributeValueIdsArry.push("," + it.AttributeValueId + ",");
                        });
                        AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
                        if (!ishas(AttributeValueIdsArry)) {
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("disabled");
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("available");

                        } else {
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("disabled");
                            if (!$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").hasClass("choices")) {
                                $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("available");
                            }
                        }
                    });

                });

            });
            //選擇屬性點擊事件
            $("body").on("click", ".available", function () {
                var AttributeId = $(this).attr("data-AttributeId");
                var AttributeValueId = $(this).attr("data-AttributeValueId");
                //先判斷Attribute是否存在該屬性，
                if (Enumerable.From(Attribute).ToLookup("$.AttributeId").Contains(parseInt(AttributeId))) {
                    $.each(Attribute, function (index, item) {
                       //存在更新其值
                        if (item.AttributeId == parseInt(AttributeId)) {
                            item.AttributeValueId = parseInt(AttributeValueId);
                        }
                    });
                }
                //不存在則添加
                else {
                    Attribute.push({ AttributeId: parseInt(AttributeId), AttributeValueId: parseInt(AttributeValueId) });
                }
                //循環每一項屬性值並查詢
                $.each(SKU_TYPET, function (index, item) {
                    $.each(item.AttributeValues, function (i, childitem) {
                        var newAttributeValueIds = Enumerable.From(Attribute).Select(function (x) { return x.AttributeValueId }).ToArray();
                        var AttributeValueIdsArry = [];
                        $.each(Attribute, function (i, it) {
                            AttributeValueIdsArry.push("," + it.AttributeValueId + ",");
                        });
                        AttributeValueIdsArry.push("," + childitem.AttributeValueId + ",");
                        if (!ishas(AttributeValueIdsArry)) {
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("disabled");
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("available");

                        } else {
                            $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").removeClass("disabled");
                            if (!$("[data-AttributeValueId='" + childitem.AttributeValueId + "']").hasClass("choices")) {
                                $("[data-AttributeValueId='" + childitem.AttributeValueId + "']").addClass("available");
                            }

                        }
                    });

                });
                $(this).removeClass("available");
                $(this).addClass("choices");

            });
            $("#Button1").click(function () {
                if (Attribute.length != SKU_TYPET.length) {
                    $("#show").css("border", "2px solid #ff0000");
                    alert("請選擇您要的商品信息");
                } else {
                    $("#show").css("border", "0");
                    alert("你已選擇："+JSON.stringify(Attribute));
                }
            })
        });
    </script>
</head>
<body>
    <div id="show" style="width:100%;">
    </div>
    <input id="Button1" type="button" value="購買" style="margin-left:98px;margin-top:20px" />

</body>
</html>