Authored by 毕凯

搜索页面筛选框 根据分类读取尺寸信息

... ... @@ -55,7 +55,7 @@
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<li data-id="{{id}}">
<span class="attr {{#if checked}}checked{{/if}}">
{{name}}
<div class="sort-up-icon"></div>
... ... @@ -179,17 +179,15 @@
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码:</span>
<div class="size section hide">
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
<div class="attr-content clearfix">
{{# size}}
<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
{{/if}}
</div>
{{#if seniorChose}}
<div class="senior section">
... ...
... ... @@ -4,7 +4,8 @@
* @date: 2015/12/4
*/
var $ = require('yoho.jquery');
var $ = require('yoho.jquery'),
Handlebars = require('yoho.handlebars');
var checkUnicode = {
unchecked: '&#xe613;',
... ... @@ -38,6 +39,13 @@ var $seniorSubWrap = $('.senior-sub-wrap'),
var seniorHoverTime, hoveredIndex;
// 尺寸 handlebars 模板
var sizeTmpl = '{{# size}}<a class="attr {{#if checked}}checked{{/if}}" href="{{href}}">{{name}}</a>{{/ size}}',
sizeCache = {}, // 缓存一下尺寸信息
$sizeWrap = $('.filter-box .size');
sizeTmpl = Handlebars.compile(sizeTmpl);
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
... ... @@ -85,13 +93,36 @@ $('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
//【分类】
$('.sort-pre').on('click', 'li', function() {
var $this = $(this),
index = $this.index();
index = $this.index(),
id = $this.data('id');
$this.siblings('.active').removeClass('active');
$this.addClass('active');
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
if (sizeCache[id]) {
$sizeWrap.find('.attr-content').html(sizeCache[id]);
$sizeWrap.removeClass('hide');
} else {
$.ajax({
url: '/product/search/sortSize',
data: {
msort: id
}
}).then(function(res) {
if ($.type(res) === 'array' && res.length) {
sizeCache[id] = sizeTmpl({
size: res
});
$sizeWrap.find('.attr-content').html(sizeCache[id]);
$sizeWrap.removeClass('hide');
} else {
$sizeWrap.addClass('hide');
}
});
}
});
//【品牌】
... ...