老师,我的问题是关于详情页。
来源:3-2 项目作业
慕斯0469344
2019-09-27 20:43:08
(function(){
// 顶部模版字符串
var itemTopTmpl = '<div class="choose-content hide">'+
'<div class="content-top">'+
'<div class="clear-car">清空购物车</div>'+
'</div>'+
'</div>';
// 底部模版字符串
var itemBottomTmpl = '<div class="bottom-content">'+
'<div class="shop-icon">'+
'<div class="dot-num hide"></div>'+
'</div>'+
'<div class="price-content">'+
'<p class="total-price">¥<span class="total-price-span">0</span></p>'+
'<p class="other-price">另需配送 ¥<span class="shipping-fee">0</span></p>'+
'</div>'+
'<div class="submit-btn">去结算</div>'+
'</div>';
var $strBottom = $(itemBottomTmpl);
var $strTop = $(itemTopTmpl);
function changeShippingPrice(str){
$strBottom.find('.shipping-fee').text(str);
}
function changeTotalPrice(str){
$strBottom.find('.total-price-span').text(str);
}
/**
* 渲染购物车顶部
* param
*/
function renderItems(){
$strTop.find('.choose-item').remove();
var list = window.food_spu_tags || [];
var tmpl = '<div class="choose-item">'+
'<div class="item-name">$name</div>'+
'<div class="price">¥<span class="total">$price</span></div>'+
'<div class="select-content">'+
'<div class="minus"></div>'+
'<div class="count">$chooseCount</div>'+
'<div class="plus"></div>'+
'</div>';
var totalPrice = 0;
list.forEach(function(item){
item.spus.forEach(function(_item){
// 如果有菜品数量大于0就开始渲染这条数据
if (_item.chooseCount > 0) {
// 计算每个菜品的总价 就是 单价*数量
var price = _item.min_price*_item.chooseCount;
var row = tmpl.replace('$name',_item.name)
.replace('$price',price)
.replace('$chooseCount',_item.chooseCount)
// 计算整个总价
totalPrice += price;
var $row = $(row);
$row.data('itemData',_item);
$strTop.append($row);
}
})
// 改变总价
changeTotalPrice(totalPrice);
// 改变红点个数
changeDot();
});
}
/**
* 渲染数量红点
* param
*/
function changeDot(){
// 先拿到所有的counts
var $counts = $strTop.find('.count');
var total = 0;
// 遍历每个count 相加
for (var i = 0 ; i < $counts.length ; i++) {
total += parseInt($($counts[i]).text());
}
if (total > 0) {
$('.dot-num').show().text(total)
} else {
$('.dot-num').hide();
}
}
function addClick(){
$('.shop-bar').on('click', '.shop-icon', function(){
$('.mask').toggle();
$strTop.toggle();
});
$strTop.on('click','.plus', function(e){
var $count = $(e.currentTarget).parent().find('.count');
$count.text(parseInt($count.text()||'0')+1);
var $item = $(e.currentTarget).parents('.choose-item').first();
var itemData = $item.data('itemData');
itemData.chooseCount = itemData.chooseCount + 1;
renderItems();
// 找到当前的右侧详情的数据,进行联动
$('.left-item.active').click();
});
$strTop.on('click','.minus', function(e){
var $count = $(e.currentTarget).parent().find('.count');
if ($count.text() == 0) return;
$count.text(parseInt($count.text()||'0')-1);
var $item = $(e.currentTarget).parents('.choose-item').first();
var itemData = $item.data('itemData');
itemData.chooseCount = itemData.chooseCount - 1;
renderItems();
// 找到当前的右侧详情的数据,进行联动
$('.left-item.active').click();
});
}
function init(data){
$('.shop-bar').append($strTop);
$('.shop-bar').append($strBottom);
addClick();
}
init();
window.ShopBar = {
renderItems: renderItems,
changeShippingPrice:changeShippingPrice
}
})();老师,为什么写这两句代码呢?
window.ShopBar = {
renderItems: renderItems,
changeShippingPrice:changeShippingPrice
}
这两句代码能实现什么功能?
1回答
好帮手慕星星
2019-09-28
同学你好。
这里是将方法添加在window的ShopBar属性(属性名自己定义)上,这样其它页面也就可以使用这个方法了。
例如添加的renderItems方法,是在shopBar.js中定义的:

以对象属性值的形式被添加在全局之后,right.js中使用了:

直接调用即可。
可以再理解下,祝学习愉快!
相似问题