js实现商品颜色尺码联动以及购买数量的选择

该模块采用Springmvc+spring+mybatis实现：
首先点击商品首页链接，从后台加载商品信息至商品详情页。
从后台加载商品信息代码如下：

  @RequestMapping(value="/product/detail.shtml")
    public String detail(Integer id,String name, ModelMap model){
      Product product = productService.getProductByKey(id);//包含img
      List<Sku> skus = skuService.getStock(id);
      List<Color> c = new ArrayList<Color>(); //去掉重复颜色
       for (Sku sku : skus) {//重写equals方法
           if(!c.contains(sku.getColor())){  //判断集合是否包含此颜色
                c.add(sku.getColor());
           }
    }
      model.addAttribute("skus",skus);
      model.addAttribute("product",product);
      model.addAttribute("colors",c);
      return "/product/productDetail";
    }
 
mybatis对应sql：

    <select id="getStock" parameterType="Integer" resultMap="sku">
        select
        id,product_id,color_id,size,delive_fee,sku_price,stock_inventory,sku_upper_limit,location,sku_img,sku_sort,sku_name,market_price,create_time,update_time,create_user_id,update_user_id,last_status,sku_type,sales
        FROM bbs_sku
        <where>
            stock_inventory > 0 and product_id = #{productId}
        </where>
    </select>

商品详情页，颜色尺码联动及购买数量选择js代码：
 <script type="text/javascript">
 $(function(){
     //初始化点击第一个颜色 jquery
     $("#colors a:first").trigger("click");  //初始化点击第一个颜色
     $("#sub").click(function(){
     var num = $("#num").val();
        num--;
        if(num == 0){
            return;
        }
        //赋值
        $("#num").val(num);
     });
  $("#add").click(function(){
         var num = $("#num").val();
         num++;
         if(num>buyLimit){
             alert("此商品一次只能买"+buyLimit+"件");
             return;
         }
         $("#num").val(num);
     });
 });
 //全局变量
   var colorId ;
   var skuId;
   var buyLimit;
      function colorToRed(target,id){
         colorId = id;
         $("#colors a").each(function(){  //colors下的a标签  通过id修改
             $(this).attr("class","changToWhite");
         });
        //先清理尺码  都变成不可点
        $("#sizes a").each(function(){
            $(this).attr("class","not-allow");
        });
        var flag = 0;
         $(target).attr("class","changToRed");
         <c:forEach items="${skus}" var="sku">
              if('${sku.colorId}' == id){
                 if(flag == 0){ //默认第一个为选中
                  $("#"+'${sku.size}').attr("class","changToWhite");
                  $("#"+'${sku.size}').attr("class","changToRed");
                  flag = 1;
                  $("#price").html("￥"+'${sku.skuPrice}');
                  $("#mprice").html("￥"+'${sku.marketPrice}');
                  $("#fee").html("￥"+'${sku.deliveFee}');
                  $("#stockInventory").html("￥"+'${sku.stockInventory}');
                  skuId = '${sku.id}';
                  buyLimit = '${sku.skuUpperLimit}';
                  }else{
                      $("#"+'${sku.size}').attr("class","changToWhite");
                 }
           }
         </c:forEach>
      }
  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="${skus}" var="sku">
     if('${sku.colorId}' == colorId && id== '${sku.size}' ){
            $("#price").html("￥"+'${sku.skuPrice}');
            $("#mprice").html("￥"+'${sku.marketPrice}');
            $("#fee").html("￥"+'${sku.deliveFee}');
            $("#stockInventory").html("￥"+'${sku.stockInventory}');
            skuId = '${sku.id}';
              buyLimit = '${sku.skuUpperLimit}';
     }
</c:forEach>
}
 </script>

商品详情页代码：

<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">￥144</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="stockInventory">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)" onclick="sizeToRed(this,'S')" class="not-allow"  id="S">S</a>
                        <a href="javascript:void(0)" onclick="sizeToRed(this,'M')" class="not-allow"  id="M">M</a>
                        <a href="javascript:void(0)" onclick="sizeToRed(this,'L')" class="not-allow"  id="L">L</a>
                        <a href="javascript:void(0)" onclick="sizeToRed(this,'XL')" class="not-allow"  id="XL">XL</a>
                        <a href="javascript:void(0)"  onclick="sizeToRed(this,'XXL')"class="not-allow"  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>