购物车面板代码修改 --code reviewed by LZF

@@ -11,7 +11,8 @@ var $ = require('jquery');
 
 // var $page = $('.yoho-page');
 
-var $num;
+var $num,
+    $chosed;
 
 // var tpl;
 
@@ -64,41 +65,69 @@ $('.yoho-page').on('touchstart', '.chose-panel', function(e) {
     var $this = $(this),
         $that = $(e.target).closest('.chose-items'),
         numArray,
-        index;
+        index,
+        i;
 
-    if ($this.hasClass('chosed')) {
-        $this.parent().find('.block').removeClass('chosed');
-        $that.find('.num .left-num').html('');
-    } else if ($this.hasClass('disable')) {
-        $this.css('background-color', '#000');
-        return;
-    } else if (!$this.hasClass('chosed')) {
-        $this.siblings('.chosed').removeClass('chosed');
-        $this.addClass('chosed');
-        index = $this.index();
+    var $siblingBlock = $this.closest('.block-list').siblings(':first'),
+        currentNumArray = $this.data('numstr').split('/');
 
+    $this.siblings('.chosed').removeClass('chosed');
+    $this.toggleClass('chosed');
+    index = $this.index();
+    $chosed = $('.block-list>ul>li.chosed');
 
-        //根据颜色切换图片
-        if ($this.closest('.block-list').hasClass('color-list')) {
-            $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
-        }
+    //根据颜色切换图片
+    if ($this.closest('.block-list').hasClass('color-list')) {
+        $('.chose-panel .basic-info').find('.thumb').addClass('hide').eq(index).removeClass('hide');
+    }
 
-        //剩余的商品数
-        if ($that.find('.color-list ul>li').hasClass('chosed') && $that.find('.size-list ul>li').hasClass('chosed')) {
-            numArray = $this.closest('.block-list').siblings(':first').find('.chosed').data('numstr').split('/');
-            $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
-        } else {
-            $that.find('.num .left-num').html('');
+    if ($chosed.length === 0) {
+        $this.closest('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+    } else if ($chosed.length === 1 && $this.hasClass('chosed')) {
+        numArray = $chosed.data('numstr').split('/');
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < numArray.length; i++) {
+            if (0 === numArray[i] - 0) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
         }
-
-        //点击切换
+    } else if ($chosed.length === 1 && !$this.hasClass('chosed')) {
+        $siblingBlock.find('ul>li').each(function() {
+            $(this).removeClass('zero-stock');
+            if (0 === $(this).data('num') - 0) {
+                $(this).addClass('zero-stock');
+            }
+        });
+        $that.find('.num .left-num').html('');
+    } else if ($chosed.length === 2) {
+        $siblingBlock.find('.block').removeClass('zero-stock');
+        for (i = 0; i < currentNumArray.length; i++) {
+            if (0 === currentNumArray[i] - 0) {
+                $siblingBlock.find('.block').eq(i).addClass('zero-stock');
+            }
+        }
+        numArray = $siblingBlock.find('.chosed').data('numstr').split('/');
+        $that.find('.num .left-num').html('剩余' + numArray[index] + '件');
     }
 
 }).on('touchstart', '.btn-minus', function() {
-    var num = +$num.val();
+    var num = +$num.val(),
+        $chosed = $('.block-list>ul>li.chosed');
 
     //若颜色和尺码没有被同时选中，则不能点击
-    if ($('.block-list>ul>li.chosed').length < 2) {
+    if ($chosed.length < 2) {
         return;
     }
 

@@ -105,10 +105,16 @@
             color: #e10;
         }
 
-        &.disable {
+        &.zero-stock {
            color: #e0e0e0;
            border-color: #e0e0e0; 
         }
+        &.zero-stock.chosed {
+            border-color: #e0e0e0; 
+            background: none;
+            color: #e0e0e0;
+            background-color: #f0f0f0;
+        }
     }
 
     .num {

@@ -25,7 +25,7 @@
                     <span>颜色</span>
                     <ul class="clearfix" data-type="color">
                         {{# colors}}
-                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{sizeNumStr}}">
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless colorNum}}zero-stock{{/unless}}" data-num="{{colorNum}}" data-numstr="{{sizeNumStr}}">
                                 {{name}}
                             </li>
                         {{/ colors}}
@@ -35,7 +35,7 @@
                     <span>尺码</span>                  
                     <ul class="clearfix" data-type="size" >
                         {{# sizes}}
-                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}disable{{/unless}}" data-id={{id}} data-numstr="{{colorNumStr}}">
+                            <li class="block {{#if chosed}}chosed{{/if}} {{#unless sizeNum}}zero-stock{{/unless}}" data-id={{id}} data-num="{{sizeNum}}" data-numstr="{{colorNumStr}}">
                                 {{name}}
                             </li>
                         {{/ sizes}}