购物商城--商品详情多级联动

来源：互联网发布：如何购买cad软件编辑：程序博客网时间：2024/04/28 06:35

1跳转到该页面，默认选择第一颜色，第一个尺码，并显示价格，运费,库存
2.当选择一个颜色时，尺码默认选择第一个，动态显示价格等数据
3,当选择尺码时候，对应显示该尺码颜色对应的价格数据

这里写图片描述

jsp

<script type="text/javascript">//全局变量var colorId;//颜色Idvar skuId;//skuIdvar buyLimit;//限购//点击选择颜色id为颜色的IDfunction colorToRed(target,id){    //给全局变量赋值    colorId=id;    //清理其他颜色    $("#colors a").each(function(){        $(this).attr("class","changToWhite");    });    //先清理尺码  都变成不可点    $("#sizes a").each(function(){        $(this).attr("class","not-allow");    });    //点击变红    $(target).attr("class","changToRed");    //第一次尺寸默认变红    var flag=0;    //判断尺寸    <c:forEach items="${skuList}"  var="sku">    //判断sku中与当前选择颜色Id一样的，将获取所有的尺码    if(id=='${sku.colorId}'){        if(flag==0){//第一个尺寸，并获取第一个尺寸的价格            //第一次尺寸默认变红,例如海蓝色id=2的有尺寸 s,m,x,那么s位红，m,x为白        $("#"+'${sku.size}').attr("class","changToRed");        flag=1;        //填充数据        //巴巴价        $("#price").html('${sku.skuPrice}');        //市场价        $("#mprice").html('${sku.marketPrice}');        //运费        $("#fee").html('${sku.deliveFee}');        //库存        $("#stock").html('${sku.stockInventory}');        //skuid        skuId='${sku.id}';        //限购        buyLimit='${sku.skuUpperLimit}';        //默认给购买件数赋值为1        $("#num").val(1);        }else{            //非第一次尺寸默认变白,例如海蓝色id=2的有尺寸 s,m,x,那么s位红，m,x为白            $("#"+'${sku.size}').attr("class","changToWhite");        }      }    </c:forEach>}//点击选择颜色id为尺码s,m,l...function sizeToRed(target,id){    //先清理尺码  都变成不可点    //如果当前是不可点的不能点    var cc=$(target).attr("class");    if(cc=="not-allow"){        return;    }    $("#sizes a").each(function(){        var c=$(this).attr("class");        //排除了不开点的后，其余的都变白        if(c!="not-allow"){            $(this).attr("class","changToWhite");        }    });    //当前的变红    $(target).attr("class","changToRed");    <c:forEach items="${skuList}"  var="sku">    //判断sku中与当前选择颜色Id一样的，将获取所有的尺码    if(colorId=='${sku.colorId}'&&id=='${sku.size}'){        //填充数据        //巴巴价        $("#price").html('${sku.skuPrice}');        //市场价        $("#mprice").html('${sku.marketPrice}');        //运费        $("#fee").html('${sku.deliveFee}');        //库存        $("#stock").html('${sku.stockInventory}');        //skuid        skuId='${sku.id}';        //限购        buyLimit='${sku.skuUpperLimit}';        //默认给购买件数赋值为1        $("#num").val(1);    }    </c:forEach>}</script></head><body>    <div class="w ofc mt">        <div class="l">            <div class="showPro">                <div class="big">                    <a id="showImg" class="cloud-zoom" href="${product.img.allUrl }"                        rel="adjustX:10,adjustY:-1"><img alt=""                        src="${product.img.allUrl }"></a>                </div>            </div>        </div>        <div class="r" style="width: 640px">            <ul class="uls form">                <li><h2>${product.name }</h2></li>                <li><label>巴 巴 价：</label><span class="word"><b                        class="f14 red mr" id="price">￥128.00</b>(市场价:<del id="mprice">￥150.00</del>)</span></li>                <li><label>商品评价：</label><span class="word"><span                        class="val_no val3d4" title="4分">4分</span>                    <var class="blue">(已有888人评价)</var></span></li>                <li><label>运 费：</label><span class="word" id="fee">10元</span></li>                <li><label>库 存：</label><span class="word" id="stock">100</span><span                    class="word">件</span></li>                <li><label>选择颜色：</label>                    <div id="colors" class="pre spec">                        <c:forEach items="${colors }" var="color">                            <a onclick="colorToRed(this,${color.id })" href="javascript:void(0)" title="${color.name }"                                class="changToWhite">                                <img width="25" height="25" data-img="1" src="/res/img/pic/ppp00.jpg" alt="${color.name }"><i>${color.name }</i></a>                        </c:forEach>                    </div></li>                <li id="sizes"><label>尺 码：</label> <a href="javascript:void(0)"                    class="not-allow" onclick="sizeToRed(this,'S')" id="S">S</a> <a                    href="javascript:void(0)" class="not-allow"                    onclick="sizeToRed(this,'M')" id="M">M</a> <a                    href="javascript:void(0)" class="not-allow"                    onclick="sizeToRed(this,'L')" id="L">L</a> <a                    href="javascript:void(0)" class="not-allow"                    onclick="sizeToRed(this,'XL')" id="XL">XL</a> <a                    href="javascript:void(0)" class="not-allow"                    onclick="sizeToRed(this,'XXL')" id="XXL">XXL</a></li>                <li><label>我 要 买：</label> <a id="sub" class="inb arr"                    style="border: 1px solid #919191; width: 10px; height: 10px; line-height: 10px; text-align: center;"                    title="减" href="javascript:void(0);">-</a>                     <input id="num" type="text" value="1" name="" size="1" readonly="readonly">                    <a id="add" class="inb arr"                    style="border: 1px solid #919191; width: 10px; height: 10px; line-height: 10px; text-align: center;"                    title="加" href="javascript:void(0);">+</a></li>                <li class="submit">                <input type="button" value="" class="hand btn138x40" onclick="buy(${product.id});" />                <input type="button" value="" class="hand btn138x40b" onclick="addCart()" /></li>            </ul>        </div>    </div></body>

controller返回的数据

     * 商品前台页面     */    @RequestMapping(value = "/product/productDetail.shtml")    public String productDetail(Integer id, ModelMap modelMap) {//id=商品id        // sku集合        List<Sku> skuList = skuService.getStock(id);        modelMap.addAttribute("skuList", skuList);        // 商品集合        Product product = productService.getProductByKey(id);        modelMap.addAttribute("product", product);        // 颜色集合        List<Color> colors = new ArrayList<Color>();        //去重复        for (Sku sku : skuList) {            //判断集合中是否已经有此颜色对象了            if (!colors.contains(sku.getColor())) {                colors.add(sku.getColor());            }        }        modelMap.addAttribute("colors", colors);        // 尺寸集合        return "product/productDetail";    }

0 0