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;
//判断尺寸
"${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");
/ /判断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.00b>(市场价:<del id="mprice">￥150.00del>)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">100span><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">Sa> <a
href="javascript:void(0)" class="not-allow"
onclick="sizeToRed(this,'M')" id="M">Ma> <a
href="javascript:void(0)" class="not-allow"
onclick="sizeToRed(this,'L')" id="L">La> <a
href="javascript:void(0)" class="not-allow"
onclick="sizeToRed(this,'XL')" id="XL">XLa> <a
href="javascript:void(0)" class="not-allow"
onclick="sizeToRed(this,'XXL')" id="XXL">XXLa>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 skuList = skuService.getStock(id);
modelMap.addAttribute("skuList", skuList);
// 商品集合
Product product = productService.getProductByKey(id);
modelMap.addAttribute("product", product);
// 颜色集合
List colors = new ArrayList();
//去重复
for (Sku sku : skuList) {
//判断集合中是否已经有此颜色对象了
if (!colors.contains(sku.getColor())) {
colors.add(sku.getColor());
}
}
modelMap.addAttribute("colors", colors);
// 尺寸集合
return "product/productDetail";
}