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>