老师，为什么我的总计菜品没有渲染进去呢？？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>order</title> <script src="js/simple.js"></script> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/bottomBar.css"> <link rel="stylesheet" href="css/header2.css"> </head> <body> <div class="header">订单</div> <!--订单列表--> <div class="order-list"></div> <!--底部--> <div class="bottom-bar"></div> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bottomBar.js"></script> <script src="js/orderList.js"></script> </body> </html>
(function(){
var itemTmpl='<div class="order-item">'+
'<div class=order-item-inner>'+
'<img class="item-img" src=$poi_pic />'+
'<div class="item-right">'+
'<div class="item-top">'+
'<p class="order-name oneline">$poi_name</p>'+
'<div class="arrow"></div>'+
'<div class="order-state">$status_description</div>'
'</div>'+
'<div class="item-bottom">$getProduct</div>'+
'</div>'+
'</div>'+
'$getComment'+
'</div>';
//渲染总计菜品
function getTotalPrice(data){
var str='<div class="product-item">'+
'<span>...</span>'+
'<div class="p-total-count">'+
'总计'+data.product_count+'个菜，实付'+
'<span class="total-price">'+data.total+'</span>'+
'</div>'+
'</div>';
return str;
}
//渲染具体商品
function getProduct(data){
var list=data.product_list || [];
list.push({type:"more"}); //判断商品数据是否结束，然后添加总计的数据
var str='';
list.forEach(function(item){
if(item.type==="more"){ //全部商品已经渲染完成
str+=getTotalPrice(data);
}else{
str+='<div class="product-item">'+
item.product_name+
'<div class="p-conunt">X'+
item.product_count+
'</div>'+
'</div>';
}
})
return str;
}
function initContentList(list){
list.forEach(function(item){
var str=itemTmpl.replace("$poi_pic",item.poi_pic)
.replace("$status_description",item.status_description)
.replace("$getProduct",getProduct(item))
.replace('$poi_name',item.poi_name);
$(".order-list").append(str);
})
}
//加载json数据
function getList(){
$.get("json/orders.json",function(data){
console.log(data);
var list=data.data.digestlist || [];
initContentList(list);
});
}
function init(){
getList();
}
init();
})()10
收起
正在回答
2回答
同学你好，1、是使用的http-server这个服务器吗？然后使用的Chrome进行测试吗？
http-server服务器可能与Chrome浏览器之间有问题，需要得清除缓存才可以测试。有两种解决方式：
（1）使用http-server，更换火狐浏览器进行测试
（2）使用Chrome浏览器，可以更换成之前学习过的wampserver服务器
2、非常抱歉，老师这里之前是有缓存，又重新测试了下，是如下，结构拼接的这里，少了一个“+”，例：
希望能帮助到你，祝学习愉快！
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星