老师,我的问题是关于详情页。
来源: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中使用了:
直接调用即可。
可以再理解下,祝学习愉快!
相似问题