颜色尺码选择优化

梁志锋
Commit 462664ff20adf066b9c46922599b84babb5d3bbb 1 parent 0ef09e6b
Showing 1 changed file with 36 additions and 68 deletions
static/js/cart/chose-panel.js
--- a/static/js/cart/chose-panel.js
View file @462664f
+++ b/static/js/cart/chose-panel.js
View file @462664f
@@ -28,9 +28,6 @@ var $chosePanel = $('#chose-panel'),
     $sizeRowList,
     $curColorBlock,
     $colorRowList,
-    $curSizeRow,
-    $curColorRow,
-    rowIndex,
     cbFn,
     $allChoseItems,
     queryString,
@@ -48,9 +45,6 @@ function init() {
     $sizeRowList = $('.size-list ul');
     $colorRowList = $('.color-list ul');
     $leftNum = $('#left-num');
-    $curSizeRow = $sizeRowList.eq(0);
-    $curColorRow = $colorRowList.eq(0);
-    rowIndex = 0;
     curColorIndex = 0;
     curSizeIndex = 0;
 }
@@ -138,6 +132,28 @@ function displayGoodNum(curGoodNum) {
     }
 }
+//老的选中尺码去掉勾选,新的选中尺码加上勾选
+function changeSizeChosed(oldSizeIndex) {
+    if (curColorIndex && $curSizeBlock && $curSizeBlock.length > 0) {
+        $curSizeBlock.removeClass('chosed');
+        $curSizeBlock = $($sizeRowList.eq(oldSizeIndex).children().get(curColorIndex - 1));
+        $curSizeBlock.addClass('chosed');
+        return $curSizeBlock.data('num');
+    }
+    return 0;
+}
+
+//老的选中颜色去掉勾选,新的选中颜色加上勾选
+function changeColorChosed(oldColorIndex) {
+    if (curSizeIndex && $curColorBlock && $curColorBlock.length > 0) {
+        $curColorBlock.removeClass('chosed');
+        $curColorBlock = $($colorRowList.eq(oldColorIndex).children().get(curSizeIndex - 1))
+        $curColorBlock.addClass('chosed');
+        return $curColorBlock.data('num');
+    }
+    return 0;
+}
+
 init();
 $yohoPage.on('touchstart', '.chose-panel', function(e) {
@@ -153,13 +169,9 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) {
 $yohoPage.on('touchstart', '.color-list .block', function() {
     var $this = $(this),
-        index,
-        curSizeBlock,
+        index = $this.index(),
         curGoodNum;
-    $this.siblings('.chosed').removeClass('chosed');
-    index = $this.index();
-
     // 当前颜色已经是选中状态,再点击时
     if ($this.hasClass('chosed')) {
@@ -176,38 +188,15 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         curSizeIndex = 0;
-        //如果尺码已经是选择状态
-        if (curColorIndex) {
-
-            // 之前选中的尺码去掉勾选样式,新尺码块勾选
-            if ($curSizeBlock && $curSizeBlock.length > 0) {
-                $curSizeBlock.removeClass('chosed');
-                curSizeBlock = $sizeRowList.eq(0).children().get(curColorIndex - 1);
-                $curSizeBlock = $(curSizeBlock);
-                curGoodNum = $curSizeBlock.data('num');
-                $curSizeBlock.addClass('chosed');
-            }
-        }
+        //老的选中尺码去掉勾选,新的选中尺码加上勾选
+        changeSizeChosed(0);
         // 当前颜色不是选中状态,选中时
     } else {
         hasChooseColor = true;
-        //如果尺码已经是选择状态
-        if (curColorIndex) {
-
-            // 之前选中的尺码去掉勾选样式,新尺码块勾选
-            if ($curSizeBlock && $curSizeBlock.length > 0) {
-                $curSizeBlock.removeClass('chosed');
-
-                //curSizeBlock = $sizeRowList.eq(curSizeIndex + 1).children().get(curColorIndex - 1);
-                curSizeBlock = $sizeRowList.eq(index + 1).children().get(curColorIndex - 1);
-                $curSizeBlock = $(curSizeBlock);
-                curGoodNum = $curSizeBlock.data('num');
-                $curSizeBlock.addClass('chosed');
-            }
-
-        }
+        //老的选中尺码去掉勾选,新的选中尺码加上勾选
+        curGoodNum = changeSizeChosed(index + 1);
         // 显示剩余数量
         displayGoodNum(curGoodNum);
@@ -225,7 +214,8 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         $imgsThumb.addClass('hide').eq(index).removeClass('hide');
     }
-    // 当前颜色块 切换勾选样式
+    // 颜色块切换勾选样式
+    $this.siblings('.chosed').removeClass('chosed');
     $this.toggleClass('chosed');
     $('#good-num').val(1);
@@ -233,13 +223,9 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
     updateConformButtonClassAndText();
 }).on('touchstart', '.size-list .block', function() {
     var $this = $(this),
-        index,
-        curColorBlock,
+        index= $this.index(),
         curGoodNum;
-    $this.siblings('.chosed').removeClass('chosed');
-    index = $this.index();
-
     // 当前尺码已经是选中状态,再点击时
     if ($this.hasClass('chosed')) {
@@ -256,35 +242,15 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         curColorIndex = 0;
-        //如果颜色已经是选择状态
-        if (curSizeIndex) {
-
-            // 之前选中的颜色去掉勾选样式,新颜色块勾选
-            if ($curColorBlock && $curColorBlock.length > 0) {
-                $curColorBlock.removeClass('chosed');
-                curColorBlock = $colorRowList.eq(0).children().get(curSizeIndex - 1);
-                $curColorBlock = $(curColorBlock);
-                curGoodNum = $curColorBlock.data('num');
-                $curColorBlock.addClass('chosed');
-            }
-        }
+        //老的选中颜色去掉勾选,新的选中颜色加上勾选
+        changeColorChosed(0);
         // 当前尺码不是选中状态,选中时
     } else {
         hasChooseSize = true;
-        //如果颜色已经是选择状态
-        if (curSizeIndex) {
-
-            // 之前选中的颜色去掉勾选样式,新颜色块勾选
-            if ($curColorBlock && $curColorBlock.length > 0) {
-                $curColorBlock.removeClass('chosed');
-                curColorBlock = $colorRowList.eq(index + 1).children().get(curSizeIndex - 1);
-                $curColorBlock = $(curColorBlock);
-                curGoodNum = $curColorBlock.data('num');
-                $curColorBlock.addClass('chosed');
-            }
-        }
+        //老的选中颜色去掉勾选,新的选中颜色加上勾选
+        curGoodNum = changeColorChosed(index + 1);
         // 显示剩余数量
         displayGoodNum(curGoodNum);
@@ -299,6 +265,8 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         $curSizeBlock = $this;
     }
+    // 颜色块切换勾选样式
+    $this.siblings('.chosed').removeClass('chosed');
     $this.toggleClass('chosed');
     $('#good-num').val(1);