1跳转到该页面，默认选择第一颜色，第一个尺码，并显示价格，运费,库存
2.当选择一个颜色时，尺码默认选择第一个，动态显示价格等数据
3,当选择尺码时候，对应显示该尺码颜色对应的价格数据
jsp
<script type="text/javascript">
//全局变量
var colorId;//颜色Id
var skuId;//skuId
var buyLimit;//限购
//点击选择颜色id为颜色的ID
function 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";
}