PC端商城详情页脚本

例子：在商城详情页中，通过ajax传回来商品的各项参数，根据数组关系找到相应的ID

定义全局样式：
var GoodsID;
var RelationList = [];
var AgentSkuList = {};
var _tempSku = new Array(0);
var globalVar = {};
var AttributeList = {};
$(function () {
    GoodsID = GetQueryString("GoodsID");
    globalVar.GoodsID = GoodsID;
    LoadGoods();
    SameBrandGoods();
    //商品详情页页面
    //固定选择参数框（有2个相同的参数选择框，同步ing~~）
    if ($(".rt-side").length) {
        var aa = $(".rt-side").offset().top;
        $(window).scroll(function () {
            var bb = $(window).scrollTop();
            if (bb > aa) {
                $(".rt-side").css({ "position": "fixed", "top": 0, "left": 1054 + 'px' });
            } else {
                $(".rt-side").css({ "position": "static" });
            }
        });
    }

    //详情页更多选择（当每种参数大于3个时 用模态框的方式来显示）
    function initPage() {
        var $netContent = $(".netContent");
        var more = "<li class='goodsMoreType'><span>" + "更多" + "</span></li>"
        $netContent.each(function () {
            var list = $(this).find("li");
            if (list.length > 3) {
                $.each(list, function (i) {
                    if (i > 2) {
                        $(this).hide();
                    }
                });
                $(this).find(".standard").append(more);
            }
        });

    }

    initPage();
    /*模态框打开*/
    $(".goodsMoreType").on("click", function (e) {
        var skuList = AgentSkuList;
        $target = $(e.target);
        var i = $target.parents(".netContent").index();
        var goodsattributeid = $target.parents(".netContent").find(".ltword").data("attributeid");
        var valueList = $.grep(AttributeList, function (item) {
            if (item.GoodsAttributeID == goodsattributeid) {
                return item;
            }
        });

        var Html = "";
        $(".goodsMoreTypeModalContent").html("");
        valueList = valueList[0].ValueList;
        $.each(valueList, function (a, b) {
            Html += "<li>" + "<span data-attributevalueid=\"" + valueList[a].GoodsAttributeValueID + "\" class=\"u-btn-choose\">" + valueList[a].AttributeValue + "</span></li>";

        });
        $(".goodsMoreTypeModalContent").html(Html);
        $(".goodsMoreTypeModal").find("#indexOf").val(i);
        $(".goodsMoreTypeModal").fadeIn();
    });

    /*模态框关闭，点击遮罩层关闭*/
    $(".close-goodsMoreTypeModal").on("click", function () {
        $(".goodsMoreTypeModal").fadeOut();
    });
    $(".goodsMoreTypeModal").on("click", function (e) {
        $target = $(e.target);
        var a = $target.parents(".goodsMoreTypeModal-dialog").length;
        if (a == "1") {
            return true;
        } else if (a == "0") {
            if ($target.hasClass("goodsMoreTypeModal-dialog")) {
                return true;
            } else {
                $(".goodsMoreTypeModal").fadeOut();
            }
        }
    });

    //模态框选择商品
    $(".goodsMoreTypeModal-dialog").on("click", "span", function (e) {
        $currentTarget = $(e.currentTarget);
        if ($currentTarget.hasClass("u-checked")) {
            $currentTarget.removeClass("u-checked");
        } else {
            $currentTarget.parents(".goodsMoreTypeModalContent").find(".u-checked").removeClass("u-checked");
            $currentTarget.addClass("u-checked");
        }
    });

    //模态框保存按钮，与页面的参数同步更新查询
    $(".btn-saveGoodsType").on("click", function () {
        var norms = $(this).parents(".goodsMoreTypeModal-dialog").find(".u-checked").parents("li");
        if (norms.length == 1) {
            var attributevalueid = norms.first().find("span").data("attributevalueid")
            var i = $("#indexOf").val();
            $(".goodsMoreTypeModal").fadeOut();
            var netContent = $(".m-detail").find(".netContent");
            var thatNetContent = $(".rt-side").find(".netContent");
            netContent.eq(i).find(".u-checked").removeClass("u-checked");
            thatNetContent.eq(i).find(".u-checked").removeClass("u-checked");
            var list = netContent.eq(i).find("li").find("span");
            var thatlist = thatNetContent.eq(i).find("li").find("span");
            $.each(thatlist, function (j) {
                if ($(this).data("attributevalueid") == attributevalueid) {
                        var l = 0;
                        var aa = $(this).parents("ul").find("li:visible").find("span");
                        $.each(aa, function (p) {
                            if ($(this).data("attributevalueid") == attributevalueid) {
                                l = p;
                                return false;
                            }
                        });
                        aa.eq(l).parents("li").hide();
                    $(this).addClass("u-checked");
                    $(this).parents("li").show();
                }
            });

            $.each(list, function (j) {
                if ($(this).data("attributevalueid") == attributevalueid) {
                        var l = 0;
                        var aa = $(this).parents("ul").find("li:visible").find("span");
                        $.each(aa, function (p) {
                            if ($(this).data("attributevalueid") == attributevalueid) {
                                l = p;
                                return false;
                            }
                        });
                       aa.eq(l).parents("li").hide();
                    $(this).addClass("u-checked");
                    $(this).parents("li").show();
                }
            });
        }
        // 多条件选择完成，查询库存等数据用的，存一个JSON数组传过去
        var $selectedItem = $(".m-detail").find(".chooseGoods-tag").find(".u-checked"),
        selectedArr = [],
        k;
        if ($selectedItem.length == $(".m-detail").find(".netContent").length) {
            for (k = 0; k < $selectedItem.length; k++) {
                selectedArr.push($selectedItem.eq(k).data("attributevalueid"));
            }
            updateGoodsInfo(selectedArr);
        }
    });


    //筛选数据
    function updateGoodsInfo(selectedArr) {
        var skuList = AgentSkuList, i, j
        var targetArr = [], index = -1;
        //筛选数据
        for (i = 0; i < skuList.length; i++) {
            targetArr[i] = new Array();
            for (j = 0; j < skuList[i].RelationList.length; j++) {
                targetArr[i].push(skuList[i].RelationList[j].ItemModel.GoodsAttributeValueID);
            }
        }
        //数据匹配
        for (i = 0; i < targetArr.length; i++) {
            if (selectedArr.sort().toString() == targetArr[i].sort().toString()) {
                index = i;
                break;
            }
        }
        //填充数据
        if (index != -1) {
            // 市场价
            $(".g-in .MarketPrice").text(skuList[index].SalePrice);
            // 库存量
            $(".u-allStock").text(skuList[index].Store);
            // 总销量
            $(".allSales").text(skuList[index].SaledAmount);
            // 当前skuID
            var itemList = skuList[index].RelationList;
            var AgentGoodsID = skuList[index].AgentGoodsID;
            globalVar.AgentGoodsID = AgentGoodsID;
            if (skuList[index].Store == 0) {
                $(".action").hide();
            }
            else {
                $(".action").show();
            }
        }
    }
    //选取商品参数
    $(".g-in").on("click", ".u-btn-choose", function (e) {
        $target = $(e.target);
        var a = $target.parents(".rt-side").length;
        var b = $target.parents(".m-detail").length;
        if (b == "1") {
            if ($target.hasClass("u-checked")) {
                $target.removeClass("u-checked");
                var net = $target.parents(".netContent");
                var arry = $(".m-detail").find(".netContent");
                var index = arry.index(net);
                $target.parents(".g-in").find(".rt-side").find(".netContent").eq(index).find(".u-checked").removeClass("u-checked");
            } else {
                var length = $target.parents(".netContent").find(".u-checked").length;//判断是否本规格内已选
                var newArrey = $(".m-detail").find(".netContent");
                var netContent = $target.parents(".netContent");
                var number = newArrey.index(netContent);
                var arrey = $target.parents("ul").find("span");
                var index = arrey.index(this);
                if (length == "0") {
                    $target.addClass("u-checked");
                    $(".rt-side").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked");
                }
                else if (length == "1") {
                    $target.parents("ul").find(".u-checked").removeClass("u-checked");
                    $(".rt-side").find(".netContent").eq(number).find("ul").find(".u-checked").removeClass("u-checked");
                    $target.addClass("u-checked");
                    $(".rt-side").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked");
                }
            }
            // 多条件选择完成
            var $selectedItem = $(".m-detail").find(".u-checked"),
                selectedArr = [],
                i;
            if ($selectedItem.length == $(".m-detail").find(".netContent").length) {
                for (i = 0; i < $selectedItem.length; i++) {
                    selectedArr.push($selectedItem.eq(i).data("attributevalueid"));
                }
                updateGoodsInfo(selectedArr);
            }
        }
        if (a == "1") {
            if ($target.hasClass("u-checked")) {
                $target.removeClass("u-checked");
                var net = $target.parents(".netContent");
                var arry = $(".rt-side").find(".netContent");
                var index = arry.index(net);
                $target.parents(".g-in").find(".m-detail").find(".netContent").eq(index).find(".u-checked").removeClass("u-checked");
            } else {
                var length = $target.parents(".netContent").find(".u-checked").length;//判断是否本规格内已选
                var newArrey = $(".rt-side").find(".netContent");
                var netContent = $target.parents(".netContent");
                var number = newArrey.index(netContent);
                var arrey = $target.parents("ul").find("span");
                var index = arrey.index(this);
                if (length == "0") {
                    $target.addClass("u-checked");
                    $(".m-detail").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked");
                } else if (length == "1") {
                    $target.parents("ul").find(".u-checked").removeClass("u-checked");
                    $(".m-detail").find(".netContent").eq(number).find("ul").find(".u-checked").removeClass("u-checked");
                    $target.addClass("u-checked");
                    $(".m-detail").find(".netContent").eq(number).find("span").eq(index).addClass("u-checked");
                }

            }
            // 多条件选择完成
            var $selectedItem = $(".rt-side").find(".u-checked"),
                selectedArr = [],
                i;
            if ($selectedItem.length == $(".rt-side").find(".netContent").length) {
                for (i = 0; i < $selectedItem.length; i++) {
                    selectedArr.push($selectedItem.eq(i).data("attributevalueid"));
                }
                updateGoodsInfo(selectedArr);
            }

        }

    });



    //加减符号运算
    $(".mui-amount-increase").on("click", function (e) {
        var $target = $(e.target);
        var $number = $target.parents(".g-in").find(".mui-amount-input")
        var initial = parseInt($number.val());
        var totalNum = $target.parents("dd").find(".u-allStock").text();
        if (initial < totalNum || totalNum == "-1") {
            initial += 1;
        }
        else {
            return false;
        } $number.val(initial);
    });
    $(".mui-amount-decrease").on("click", function (e) {
        var $target = $(e.target);
        var $number = $target.parent().parent().find(".mui-amount-input")
        var initial = parseInt($number.val());
        if (initial > 1) {
            initial -= 1;
        } else {
            return false;
        }
        $number.val(initial);
    });
    //加入购物车和立即购买
    $(".u-btn-account").on("click", function (e) {
        $target = $(e.target);
        var arrey = $target.parents(".sku").find(".netContent").length;
        var index = $target.parents(".sku").find(".u-checked").length;
        var goodsNum = $(".mui-amount-input").val();
        var obj = {
            AgentSkuID: globalVar.AgentGoodsID,
            GoodsNum: goodsNum,
            GoodsID: globalVar.GoodsID
        };
        if (index == arrey) {
            if ($target.hasClass("accountCar")) {
                var url = "/AgentShop/Details/BuyShoppingCart";
                $.ajax({
                    type: "POST",
                    url: url,
                    data: obj,
                    success: function (data) {
                        var BuyOrderID = data.data;
                        if (data.status == "y") {
                            alert("加入购物车成功！");
                        } else { alert("加入购物车失败！"); }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("提交出错，请重试！");
                    }
                });
            } else if ($target.hasClass("accountBuy")) {
                var url = "/AgentShop/Details/BuyShope";
                $.ajax({
                    type: "POST",
                    url: url,
                    data: obj,
                    success: function (data) {
                        setTimeout(function () {
                            location.href = data;
                        }, 2000)
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("提交出错，请重试！");
                    }
                });
            }

        } else {
            alert("请先选择商品规格");
        }
    });
});
//页面进入加载数据
function LoadGoods() {
    $.ajax({
        url: '/AgentShop/Details/GetGoodsInfo?date=' + new Date().getMilliseconds(),
        type: 'post',
        dataType: 'json',
        async: false,
        data: { GoodsID: GoodsID },
        success: function (data) {
            if (data.status == "n") {

            }
            else {
                AgentSkuList = data.GoodsModel.AgentSkuList;
                var AgentSkuModel = data.GoodsModel.AgentSkuModel;
                AttributeList = data.GoodsModel.AttributeList;
                RelationList = data.GoodsModel.RelationList
                var newDt = data.GoodsModel;
                $(".cloud-zoom").attr("href", newDt.ImgUrl);
                $(".cloud-zoom").find("img").attr("src", newDt.ImgUrl);

                if (newDt.ImgUrl) {
                    $("#List1").append("<li><div><a href='" + newDt.ImgUrl + "' class='cloud-zoom-gallery' rel=\"useZoom:'zoom1', smallImage: '" + newDt.ImgUrl + "'\"> <img src=\"" + newDt.ImgUrl + "\" name=\"picautozoom\" /></a></div></li>")
                }
                //if (newDt.ThumbnailUrl) {
                // $("#List1").append("<li><div><a href='" + newDt.ThumbnailUrl + "' class='cloud-zoom-gallery' rel=\"useZoom:'zoom1', smallImage: '" + newDt.ThumbnailUrl + "'\"> <img src=\"" + newDt.ThumbnailUrl + "\" name=\"picautozoom\" /></a></div></li>")
                //}

                $(".swiper-wrapper").html("<div class=\"swiper-slide\"><a href=\"#\"><img src=\"" + newDt.ImgUrl + "\" alt=\"\"></a></div>");
                $(".product_name").html(newDt.GoodsName);
                $(".promo-price").find(".price").html("&yen" + AgentSkuModel.SalePrice);
                $(".gMarketPrice").html("&yen" + "<label class='MarketPrice'>" + AgentSkuModel.MarketPrice + "</label>");
                $(".gCode").html(newDt.GoodsCode);
                $("#DivmarginR1").html(newDt.TransportCost);
                $("#lbSaleAmount").html(AgentSkuModel.SaledAmount);
                $(".m-goodsDetails").html(newDt.Description);
                $(".thisGoodsProduct").find("span").html("&yen" + AgentSkuModel.SalePrice);
                $("#lbStore").html(AgentSkuModel.Store);
                $(".GoodsNorms").find("img").first().attr("src", newDt.ImgUrl);
                var Html = "";
                $.each(AttributeList, function (a, b) {
                    var ValueList = AttributeList[a].ValueList;

                    Html += " <dl class=\"netContent clearfix padding10\"><dt class=\"ltword padTop12\" data-AttributeID='" + AttributeList[a].GoodsAttributeID + "'>" + AttributeList[a].AttributeName + "</dt>";
                    Html += "<dd> <ul class=\"standard\">";
                    $.each(ValueList, function (v, c) {
                        Html += "<li><span class=\"u-btn-choose\" data-AttributeValueID='" + ValueList[v].GoodsAttributeValueID + "'>" + ValueList[v].AttributeValue + "</span></li>";
                    });
                    Html += "</ul></dd></dl>";
                });
                $(".chooseGoods-tag").html(Html);

            }
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {

        }
    });
}

var SameBrandGoods = function () {
    $.ajax({
        url: '/AgentShop/Details/GetSameBrandGoods?date=' + new Date().getMilliseconds(),
        type: 'post',
        dataType: 'json',
        async: false,
        data: { GoodsID: GoodsID },
        success: function (data) {
            if (data.length > 0) {
                var Html = "";
                $.each(data, function (a, b) {
                    Html += "<li><a class=\"pic\" href=\"#\"><img alt=\"\" src=\"" + data[a].ImgUrl + "\">"
                    + "</a><p class=\"name\"><a title=\"\" href=\"#\" target=\"_blank\">" + data[a].GoodsName + "</a> </p></li>"; ''
                });
                $(".Same-brand").find("ul").html(Html);
            }
        }
    });
}