老师不知道问题出在哪 没报错 没加上购物车
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
right.js
(function(){
var itemTmpl='<div class="menu-item">'+
'<img class="img" src=$picture />'+
'<div class="menu-item-right">'+
'<p class="item-title">$name</p>'+
'<p class="item-desc">$description</p>'+
'<p class="item-zan">$praise_content</p>'+
'<p class="item-price">¥$min_price<span class="unit">/$unit</span></p>'+
'</div>'+
'<div class="select-content">'+
'<div class="minus"></div>'+
'<div class="count">$chooseCount</div>'+
'<div class="plus"></div>'+
'</div>'+
'</div>';
function initRightList(list){
//清除数据 防止refresh出很多数据
$('.right-list-inner').html('');
list.forEach(function(item,index){
if (!item.chooseCount){
item.chooseCount=0;
}
var str=itemTmpl
.replace('$picture',item.picture)
.replace('$name',item.name)
.replace('$description',item.description)
.replace('$praise_content',item.praise_content)
.replace('$min_price',item.min_price)
.replace('$unit',item.unit)
.replace('$chooseCount',item.chooseCount);
// 模板字符串转换成jq对象 目的将数据进行绑定
var $target=$(str);
//itemdata自定义取回数据的名称 target是数组
$target.data('itemData',item);
$('.right-list-inner').append($target);
})
}
// 渲染右侧title
function initRightTitle(str){
$('.right-title').text(str);
}
function addClick(){
$('.menu-item').on('click','.plus',function(e){
var $count=$(e.currentTarget).parent().find('.count');
$count.text(parseInt($count.text()||'0')+1);
var $item = $(e.currentTarget).parents('.menu-item').first();
var itemData= $item.data('itemData');
itemData.chooseCount=itemData.chooseCount+1;
window.ShopBar.renderItems();
});
$('.menu-item').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 $items = $(e.currentTarget).parents('.menu-item').first();
var itemData= $items.data('itemData');
itemData.chooseCount=itemData.chooseCount-1;
window.ShopBar.renderItems();
});
}
function init(data){
initRightList(data.spus || []);
initRightTitle(data.name);
addClick();
}
window.Right={
refresh: init
}
})();
shopbar.js
(function(){
//顶部模板字符串
var itemTopTmpl ='<div class="choose-content">'+
'<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>';
//1 转换成jq对象
var $strBottom=$(itemBottomTmpl);
var $strTop=$(itemTopTmpl);
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);
}
})
})
}
//替换 init进来
function init(data){
$('.shop-bar').append($strTop);
$('.shop-bar').append($strBottom);
}
init();
window.ShopBar={
renderItems:renderItems
}
})();
在这里输入代码,可通过选择【代码语言】突出显示
正在回答
你好,老师测试代码确实是有报错,但是购物车是没有问题的
这个报错是因为window.ShopBar.changeShippingPrice方法并不存在,后面课程中在shopBar.js文件中设置了此方法,可以继续往下面看哦:
关于购物车的问题,同学可以查看私信解决。
祝学习愉快!
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星