|
@@ -26,6 +26,11 @@ var $chosePanel = $('#chose-panel'), |
|
@@ -26,6 +26,11 @@ var $chosePanel = $('#chose-panel'), |
26
|
hasChooseSize,
|
26
|
hasChooseSize,
|
27
|
$curSizeBlock,
|
27
|
$curSizeBlock,
|
28
|
$sizeRowList,
|
28
|
$sizeRowList,
|
|
|
29
|
+ $curColorBlock,
|
|
|
30
|
+ $colorRowList,
|
|
|
31
|
+ $curSizeRow,
|
|
|
32
|
+ $curColorRow,
|
|
|
33
|
+ rowIndex,
|
29
|
cbFn,
|
34
|
cbFn,
|
30
|
$allChoseItems,
|
35
|
$allChoseItems,
|
31
|
queryString,
|
36
|
queryString,
|
|
@@ -41,7 +46,13 @@ function init() { |
|
@@ -41,7 +46,13 @@ function init() { |
41
|
$imgsThumb = $('.chose-panel').find('.thumb');
|
46
|
$imgsThumb = $('.chose-panel').find('.thumb');
|
42
|
$allChoseItems = $('.chose-items');
|
47
|
$allChoseItems = $('.chose-items');
|
43
|
$sizeRowList = $('.size-list ul');
|
48
|
$sizeRowList = $('.size-list ul');
|
|
|
49
|
+ $colorRowList = $('.color-list ul');
|
44
|
$leftNum = $('#left-num');
|
50
|
$leftNum = $('#left-num');
|
|
|
51
|
+ $curSizeRow = $sizeRowList.eq(0);
|
|
|
52
|
+ $curColorRow = $colorRowList.eq(0);
|
|
|
53
|
+ rowIndex = 0;
|
|
|
54
|
+ curColorIndex = 0;
|
|
|
55
|
+ curSizeIndex = 0;
|
45
|
}
|
56
|
}
|
46
|
|
57
|
|
47
|
function checkColorSizeNum() {
|
58
|
function checkColorSizeNum() {
|
|
@@ -107,39 +118,6 @@ function updateConformButtonClassAndText() { |
|
@@ -107,39 +118,6 @@ function updateConformButtonClassAndText() { |
107
|
}
|
118
|
}
|
108
|
}
|
119
|
}
|
109
|
|
120
|
|
110
|
-//重置颜色块的库存为0的样式
|
|
|
111
|
-function resetColorZeroStock($siblingBlock) {
|
|
|
112
|
- var numArray,
|
|
|
113
|
- i;
|
|
|
114
|
-
|
|
|
115
|
- if (!hasChooseSize) {
|
|
|
116
|
- $siblingBlock.find('ul>li').each(function() {
|
|
|
117
|
- if (0 === $(this).data('num')) {
|
|
|
118
|
- $(this).addClass('zero-stock');
|
|
|
119
|
- } else {
|
|
|
120
|
- $(this).removeClass('zero-stock');
|
|
|
121
|
- }
|
|
|
122
|
- });
|
|
|
123
|
-
|
|
|
124
|
- } else {
|
|
|
125
|
- numArray = ($curSizeBlock.data('numstr') + '').split('/');
|
|
|
126
|
- for (i = 0; i < numArray.length; i++) {
|
|
|
127
|
- if ('0' === numArray[i]) {
|
|
|
128
|
- $siblingBlock.find('.block').eq(i).addClass('zero-stock');
|
|
|
129
|
- } else {
|
|
|
130
|
- $siblingBlock.find('.block').eq(i).removeClass('zero-stock');
|
|
|
131
|
- }
|
|
|
132
|
- }
|
|
|
133
|
- }
|
|
|
134
|
-}
|
|
|
135
|
-
|
|
|
136
|
-// 选择了颜色切换商品图片
|
|
|
137
|
-function changeGoodImgWhenClickColor() {
|
|
|
138
|
- if (hasChooseColor && curColorIndex >= 0) {
|
|
|
139
|
- $imgsThumb.addClass('hide').eq(curColorIndex).removeClass('hide');
|
|
|
140
|
- }
|
|
|
141
|
-}
|
|
|
142
|
-
|
|
|
143
|
init();
|
121
|
init();
|
144
|
|
122
|
|
145
|
$yohoPage.on('touchstart', '.chose-panel', function(e) {
|
123
|
$yohoPage.on('touchstart', '.chose-panel', function(e) {
|
|
@@ -157,35 +135,37 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
|
@@ -157,35 +135,37 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
157
|
var $this = $(this),
|
135
|
var $this = $(this),
|
158
|
index,
|
136
|
index,
|
159
|
curSizeBlock,
|
137
|
curSizeBlock,
|
160
|
- $preSiblingBlock,
|
|
|
161
|
- $curSizeRow,
|
|
|
162
|
- numArray,
|
|
|
163
|
- i,
|
|
|
164
|
curGoodNum;
|
138
|
curGoodNum;
|
165
|
|
139
|
|
166
|
- var $siblingBlock = $this.closest('.block-list').siblings(':first');
|
|
|
167
|
-
|
|
|
168
|
$this.siblings('.chosed').removeClass('chosed');
|
140
|
$this.siblings('.chosed').removeClass('chosed');
|
169
|
index = $this.index();
|
141
|
index = $this.index();
|
170
|
|
142
|
|
171
|
- $preSiblingBlock = $siblingBlock.find('.chosed');
|
|
|
172
|
- $curSizeRow = $sizeRowList.eq(index);
|
|
|
173
|
-
|
|
|
174
|
// 当前颜色已经是选中状态,再点击时
|
143
|
// 当前颜色已经是选中状态,再点击时
|
175
|
if ($this.hasClass('chosed')) {
|
144
|
if ($this.hasClass('chosed')) {
|
176
|
|
145
|
|
177
|
- //颜色原来已经是勾选时,要清空剩余件数的提示
|
146
|
+ //清空剩余件数的提示
|
178
|
$allChoseItems.find('.num .left-num').html('');
|
147
|
$allChoseItems.find('.num .left-num').html('');
|
179
|
$leftNum.val(0);
|
148
|
$leftNum.val(0);
|
180
|
hasChooseColor = false;
|
149
|
hasChooseColor = false;
|
181
|
|
150
|
|
182
|
- $this.removeClass('zero-stock');
|
|
|
183
|
- if ($curSizeBlock) {
|
|
|
184
|
- numArray = ($curSizeBlock.data('numstr') + '').split('/');
|
|
|
185
|
- for (i = 0; i < numArray.length; i++) {
|
|
|
186
|
- if ('0' === numArray[i]) {
|
|
|
187
|
- $('.color-list .block').eq(i).addClass('zero-stock');
|
|
|
188
|
- }
|
151
|
+ //当前尺码行隐藏
|
|
|
152
|
+ $sizeRowList.eq(curSizeIndex).removeClass('show').addClass('hide');
|
|
|
153
|
+
|
|
|
154
|
+ //目标尺码行显示
|
|
|
155
|
+ $sizeRowList.eq(0).removeClass('hide').addClass('show');
|
|
|
156
|
+
|
|
|
157
|
+ curSizeIndex = 0;
|
|
|
158
|
+
|
|
|
159
|
+ //如果尺码已经是选择状态
|
|
|
160
|
+ if (curColorIndex) {
|
|
|
161
|
+
|
|
|
162
|
+ // 之前选中的尺码去掉勾选样式,新尺码块勾选
|
|
|
163
|
+ if ($curSizeBlock && $curSizeBlock.length > 0) {
|
|
|
164
|
+ $curSizeBlock.removeClass('chosed');
|
|
|
165
|
+ curSizeBlock = $sizeRowList.eq(0).children().get(curColorIndex - 1);
|
|
|
166
|
+ $curSizeBlock = $(curSizeBlock);
|
|
|
167
|
+ curGoodNum = $curSizeBlock.data('num');
|
|
|
168
|
+ $curSizeBlock.addClass('chosed');
|
189
|
}
|
169
|
}
|
190
|
}
|
170
|
}
|
191
|
|
171
|
|
|
@@ -193,23 +173,21 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
|
@@ -193,23 +173,21 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
193
|
} else {
|
173
|
} else {
|
194
|
hasChooseColor = true;
|
174
|
hasChooseColor = true;
|
195
|
|
175
|
|
196
|
- //把当前选中颜色对应的尺码那一行显示出来
|
|
|
197
|
- $sizeRowList.addClass('hide');
|
|
|
198
|
- $curSizeRow.removeClass('hide').addClass('show');
|
176
|
+ //如果尺码已经是选择状态
|
|
|
177
|
+ if (curColorIndex) {
|
199
|
|
178
|
|
200
|
- // 之前选中的尺码去掉勾选样式
|
|
|
201
|
- if ($preSiblingBlock.length > 0) {
|
|
|
202
|
- $preSiblingBlock.removeClass('chosed');
|
|
|
203
|
- curSizeBlock = $curSizeRow.children().get(curSizeIndex);
|
|
|
204
|
- $curSizeBlock = $(curSizeBlock);
|
|
|
205
|
- }
|
179
|
+ // 之前选中的尺码去掉勾选样式,新尺码块勾选
|
|
|
180
|
+ if ($curSizeBlock && $curSizeBlock.length > 0) {
|
|
|
181
|
+ $curSizeBlock.removeClass('chosed');
|
206
|
|
182
|
|
207
|
- // 当前选中颜色对应的尺码行,其对应的尺码加上勾选样式 (前提是要判断下这个尺码是否存在)
|
|
|
208
|
- if (curSizeBlock) {
|
|
|
209
|
- curGoodNum = $(curSizeBlock).data('num');
|
|
|
210
|
- $(curSizeBlock).addClass('chosed');
|
183
|
+ //curSizeBlock = $sizeRowList.eq(curSizeIndex + 1).children().get(curColorIndex - 1);
|
|
|
184
|
+ curSizeBlock = $sizeRowList.eq(index + 1).children().get(curColorIndex - 1);
|
|
|
185
|
+ $curSizeBlock = $(curSizeBlock);
|
|
|
186
|
+ curGoodNum = $curSizeBlock.data('num');
|
|
|
187
|
+ $curSizeBlock.addClass('chosed');
|
|
|
188
|
+ }
|
211
|
|
189
|
|
212
|
- //如果当前有尺码被选中,且数量等于0,则颜色块添加数量为0的样式
|
190
|
+ //数量大于0
|
213
|
if (curGoodNum > 0) {
|
191
|
if (curGoodNum > 0) {
|
214
|
if ($soonSoldOut.length > 0) {
|
192
|
if ($soonSoldOut.length > 0) {
|
215
|
$allChoseItems.find('.num .left-num').html('即将售罄');
|
193
|
$allChoseItems.find('.num .left-num').html('即将售罄');
|
|
@@ -218,81 +196,118 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
|
@@ -218,81 +196,118 @@ $yohoPage.on('touchstart', '.color-list .block', function() { |
218
|
}
|
196
|
}
|
219
|
|
197
|
|
220
|
$leftNum.val(curGoodNum);
|
198
|
$leftNum.val(curGoodNum);
|
|
|
199
|
+
|
|
|
200
|
+ //数量小于0
|
221
|
} else {
|
201
|
} else {
|
222
|
$allChoseItems.find('.num .left-num').html('');
|
202
|
$allChoseItems.find('.num .left-num').html('');
|
223
|
$leftNum.val(0);
|
203
|
$leftNum.val(0);
|
224
|
}
|
204
|
}
|
225
|
}
|
205
|
}
|
|
|
206
|
+
|
|
|
207
|
+ // 尺码行当前行隐藏
|
|
|
208
|
+ $sizeRowList.eq(curSizeIndex).removeClass('show').addClass('hide');
|
|
|
209
|
+
|
|
|
210
|
+ //尺码对应行显示
|
|
|
211
|
+ $sizeRowList.eq(index + 1).removeClass('hide').addClass('show');
|
|
|
212
|
+
|
|
|
213
|
+ curSizeIndex = index + 1;
|
|
|
214
|
+ $curColorBlock = $this;
|
|
|
215
|
+
|
|
|
216
|
+ // 修改颜色时修改商品图片
|
|
|
217
|
+ $imgsThumb.addClass('hide').eq(index).removeClass('hide');
|
226
|
}
|
218
|
}
|
227
|
|
219
|
|
228
|
// 当前颜色块 切换勾选样式
|
220
|
// 当前颜色块 切换勾选样式
|
229
|
$this.toggleClass('chosed');
|
221
|
$this.toggleClass('chosed');
|
230
|
- curColorIndex = index;
|
|
|
231
|
$('#good-num').val(1);
|
222
|
$('#good-num').val(1);
|
232
|
|
223
|
|
233
|
- // 修改颜色时修改商品图片
|
|
|
234
|
- changeGoodImgWhenClickColor();
|
|
|
235
|
-
|
|
|
236
|
// 设置按钮的样式和文字
|
224
|
// 设置按钮的样式和文字
|
237
|
updateConformButtonClassAndText();
|
225
|
updateConformButtonClassAndText();
|
238
|
}).on('touchstart', '.size-list .block', function() {
|
226
|
}).on('touchstart', '.size-list .block', function() {
|
239
|
var $this = $(this),
|
227
|
var $this = $(this),
|
240
|
index,
|
228
|
index,
|
241
|
- $curSizeRow,
|
229
|
+ curColorBlock,
|
242
|
curGoodNum;
|
230
|
curGoodNum;
|
243
|
|
231
|
|
244
|
- var $siblingBlock = $this.closest('.block-list').siblings(':first');
|
|
|
245
|
-
|
|
|
246
|
$this.siblings('.chosed').removeClass('chosed');
|
232
|
$this.siblings('.chosed').removeClass('chosed');
|
247
|
index = $this.index();
|
233
|
index = $this.index();
|
248
|
- $curSizeRow = $sizeRowList.eq(index);
|
|
|
249
|
|
234
|
|
250
|
// 当前尺码已经是选中状态,再点击时
|
235
|
// 当前尺码已经是选中状态,再点击时
|
251
|
if ($this.hasClass('chosed')) {
|
236
|
if ($this.hasClass('chosed')) {
|
252
|
|
237
|
|
253
|
- //尺码原来已经是勾选时,要清空剩余件数的提示
|
238
|
+ //清空剩余件数的提示
|
254
|
$allChoseItems.find('.num .left-num').html('');
|
239
|
$allChoseItems.find('.num .left-num').html('');
|
255
|
- $('#left-num').val(0);
|
240
|
+ $leftNum.val(0);
|
256
|
hasChooseSize = false;
|
241
|
hasChooseSize = false;
|
257
|
- curSizeIndex = null;
|
|
|
258
|
- $curSizeBlock = null;
|
242
|
+
|
|
|
243
|
+ //当前颜色行隐藏
|
|
|
244
|
+ $colorRowList.eq(curColorIndex).removeClass('show').addClass('hide');
|
|
|
245
|
+
|
|
|
246
|
+ //目标颜色行显示
|
|
|
247
|
+ $colorRowList.eq(0).removeClass('hide').addClass('show');
|
|
|
248
|
+
|
|
|
249
|
+ curColorIndex = 0;
|
|
|
250
|
+
|
|
|
251
|
+ //如果颜色已经是选择状态
|
|
|
252
|
+ if (curSizeIndex) {
|
|
|
253
|
+
|
|
|
254
|
+ // 之前选中的颜色去掉勾选样式,新颜色块勾选
|
|
|
255
|
+ if ($curColorBlock && $curColorBlock.length > 0) {
|
|
|
256
|
+ $curColorBlock.removeClass('chosed');
|
|
|
257
|
+ curColorBlock = $colorRowList.eq(0).children().get(curSizeIndex - 1);
|
|
|
258
|
+ $curColorBlock = $(curColorBlock);
|
|
|
259
|
+ curGoodNum = $curColorBlock.data('num');
|
|
|
260
|
+ $curColorBlock.addClass('chosed');
|
|
|
261
|
+ }
|
|
|
262
|
+ }
|
259
|
|
263
|
|
260
|
// 当前尺码不是选中状态,选中时
|
264
|
// 当前尺码不是选中状态,选中时
|
261
|
} else {
|
265
|
} else {
|
262
|
hasChooseSize = true;
|
266
|
hasChooseSize = true;
|
263
|
- curGoodNum = $this.data('num');
|
|
|
264
|
|
267
|
|
265
|
- // 之前选中的尺码去掉勾选样式
|
|
|
266
|
- if ($curSizeBlock) {
|
|
|
267
|
- $curSizeBlock.removeClass('chosed');
|
|
|
268
|
- }
|
268
|
+ //如果颜色已经是选择状态
|
|
|
269
|
+ if (curSizeIndex) {
|
|
|
270
|
+
|
|
|
271
|
+ // 之前选中的颜色去掉勾选样式,新颜色块勾选
|
|
|
272
|
+ if ($curColorBlock && $curColorBlock.length > 0) {
|
|
|
273
|
+ $curColorBlock.removeClass('chosed');
|
|
|
274
|
+
|
|
|
275
|
+ //curColorBlock = $colorRowList.eq(curColorIndex + 1).children().get(curSizeIndex - 1);
|
|
|
276
|
+ curColorBlock = $colorRowList.eq(index + 1).children().get(curSizeIndex - 1);
|
|
|
277
|
+ $curColorBlock = $(curColorBlock);
|
|
|
278
|
+ curGoodNum = $curColorBlock.data('num');
|
|
|
279
|
+ $curColorBlock.addClass('chosed');
|
|
|
280
|
+ }
|
269
|
|
281
|
|
270
|
- // 如果当前有尺码被选中,且数量等于0, 否则显示剩余件数
|
|
|
271
|
- if (curGoodNum > 0 && hasChooseColor) {
|
|
|
272
|
- if ($soonSoldOut.length > 0) {
|
|
|
273
|
- $allChoseItems.find('.num .left-num').html('即将售罄');
|
282
|
+ //数量大于0
|
|
|
283
|
+ if (curGoodNum > 0) {
|
|
|
284
|
+ if ($soonSoldOut.length > 0) {
|
|
|
285
|
+ $allChoseItems.find('.num .left-num').html('即将售罄');
|
|
|
286
|
+ } else {
|
|
|
287
|
+ $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
|
|
288
|
+ }
|
|
|
289
|
+ $leftNum.val(curGoodNum);
|
|
|
290
|
+
|
|
|
291
|
+ //数量小于0
|
274
|
} else {
|
292
|
} else {
|
275
|
- $allChoseItems.find('.num .left-num').html('剩余' + curGoodNum + '件');
|
293
|
+ $allChoseItems.find('.num .left-num').html('');
|
|
|
294
|
+ $leftNum.val(0);
|
276
|
}
|
295
|
}
|
277
|
- $('#left-num').val(curGoodNum);
|
|
|
278
|
- } else {
|
|
|
279
|
- $allChoseItems.find('.num .left-num').html('');
|
|
|
280
|
- $('#left-num').val(0);
|
|
|
281
|
}
|
296
|
}
|
282
|
|
297
|
|
283
|
- if (curGoodNum === 0 && hasChooseColor) {
|
|
|
284
|
- $this.addClass('zero-stock');
|
|
|
285
|
- }
|
|
|
286
|
- curSizeIndex = index;
|
298
|
+ // 颜色当前行隐藏
|
|
|
299
|
+ $colorRowList.eq(curColorIndex).removeClass('show').addClass('hide');
|
|
|
300
|
+
|
|
|
301
|
+ //颜色对应行显示
|
|
|
302
|
+ $colorRowList.eq(index + 1).removeClass('hide').addClass('show');
|
|
|
303
|
+
|
|
|
304
|
+ curColorIndex = index + 1;
|
287
|
$curSizeBlock = $this;
|
305
|
$curSizeBlock = $this;
|
288
|
}
|
306
|
}
|
289
|
|
307
|
|
290
|
$this.toggleClass('chosed');
|
308
|
$this.toggleClass('chosed');
|
291
|
$('#good-num').val(1);
|
309
|
$('#good-num').val(1);
|
292
|
|
310
|
|
293
|
- // 重置颜色块的样式
|
|
|
294
|
- resetColorZeroStock($siblingBlock);
|
|
|
295
|
-
|
|
|
296
|
// 设置按钮的样式和文字
|
311
|
// 设置按钮的样式和文字
|
297
|
updateConformButtonClassAndText();
|
312
|
updateConformButtonClassAndText();
|
298
|
});
|
313
|
});
|