为什么chooseContent取到的一直是undefined
<!DOCTYPE html>
<html>
<head>
<title>深圳前海二餐厅</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<script>
(function(){
var docEl = document.documentElement;
function setRemUnit(){
// 获取到rem的基准值
var viewWidth = docEl.clientWidth||window.innerWidth;
var rem = viewWidth/10;
// 动态设置HTML根元素的fontsize
docEl.style.fontSize = rem+'px';
};
setRemUnit();
// 窗口大小变化时触发
window.addEventListener('resize',setRemUnit);
// 窗口出现在当前屏幕时（有浏览器兼容性）
window.addEventListener('pageshow',function(e){
if(e.persisted) setRemUnit();
});
})();
</script>
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="../common/navHeader/navHeader.css">
<link rel="stylesheet" href="../common/headerTab/headerTab.css">
<link rel="stylesheet" href="left/left.css">
<link rel="stylesheet" href="right/right.css">
<link rel="stylesheet" href="shopBar/shopBar.css">
</head>
<body>
<!-- 头部开始 -->
<div class="nav">
<div class="back-icon"></div>
<h4 class="title">深圳前海二餐厅</h4>
</div>
<!-- 头部结束 -->
<!-- 选项卡开始 -->
<div class="tab-bar"></div>
<!-- 选项卡结束 -->
<!-- 点菜内容区开始 -->
<div class="menu-inner">
<div class="left-bar">
<div class="left-bar-inner"></div>
</div>
<div class="right-content">
<p class="right-title"></p>
<div class="right-list">
<div class="right-list-inner"></div>
</div>
<!-- 购物车区域开始 -->
<div class="shop-bar"></div>
<div class="mask hide"></div>
<!-- 购物车区域结束 -->
</div>
</div>
<!-- 点菜内容区结束 -->
<script src="../lib/Zepto.js"></script>
<script src="../common/headerTab/headerTab.js"></script>
<script src="left/left.js"></script>
<script src="right/right.js"></script>
<script src="shopBar/shopBar.js"></script>
</body>
</html>/* left.js */
(function(){
// 左侧类目模板字符串
var itemTmpl = '<div class="left-item">'+
'<div class="item-text">$getItemContent</div>';+
'</div>';
// 请求数据
function getList(){
$.get('../json/food.json',function(data){
window.food_spu_tags = data.data.food_spu_tags||[];
initContentList(window.food_spu_tags);
});
};
// 渲染item内容 param obj
function getItemContent(data){
if(data.icon){
return '<img class="item-icon" src='+data.icon+' />'+data.name;
}else{
return data.name;
};
};
// 渲染列表 param array
function initContentList(list){
list.forEach(function(item,index){
var str = itemTmpl.replace('$getItemContent',getItemContent(item));
var $target = $(str);
// 将item数据挂载在left-item上面
$target.data('itemData',JSON.stringify(item));
$('.left-bar-inner').append($target);
});
};
function addClick(){
$('.menu-inner').on('click','.left-item',function(e){
var $target = $(e.currentTarget);
$target.addClass('active');
$target.siblings().removeClass('active');
// 将数据传给右侧详情列表进行渲染
window.Right.refresh($target.data('itemData'));
})
}
function init(){
getList();
addClick();
};
init();
})();/* 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>';
// 渲染列表 param array
function initRightList(list){
$('.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);
var $target = $(str);
$target.data('itemData',JSON.stringify(item));
$('.right-list-inner').append($target);
});
};
// 渲染顶部右侧title
function initRightTitle(str){
$('.right-title').text(str);
};
function addClick(data){
$('.menu-item').on('click','.plus',function(e){
var $count = $(e.currentTarget).parent().find('.count');
$count.text(parseInt($count.text())+1);
var $item = $(e.currentTarget).parents('.menu-item').first();
data.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())-1);
var $item = $(e.currentTarget).parents('.menu-item').first();
data.chooseCount-=1;
window.ShopBar.renderItems();
});
}
function init(data){
initRightList(data.spus)||[];
initRightTitle(data.name)||'';
addClick(data);
}
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-span">0</span>'+
'</p>'+
'</div>'+
'<div class="submit-btn">去结算</div>'+
'</div>';
var $strTop = $(itemTopTmpl);
var $strBottom = $(itemBottomTmpl);
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>'+
'</div>';
var totalPrice = 0;
list.forEach(function(item,index){
item.spus.forEach(function(_item){
// 如果有菜品数量大于0就渲染数据
if(_item.chooseContent>0){
// 计算菜品的总价 单价 * 数量
var price = _item.min_price*_item.chooseContent;
var row = tmpl.replace('$name',_item.name)
.replace('$price',_item.price)
.replace('$chooseCount',_item.chooseCount)
// 计算总价
totalPrice+=price;
var $row = $(row);
$row.data('itemData',JSON.stringify(_item));
$strTop.append($row);
}
})
})
}
function addClick(data){
}
function init(data){
$('.shop-bar').append($strTop);
$('.shop-bar').append($strBottom);
}
init();
window.ShopBar = {
renderItems:renderItems
}
})();7
收起
正在回答
3回答
同学你好，
1、 因为你这里引入的是Zepto文件 ， zepto的data方法只能存储字符串，所以取得[object, object]。你用JSON.stringify(item)转换过后，看起来是对的， 但是你每次获取字符串是新的，导致可能修改数据不会影响以前的， 建议： 使用jQuery文件， 可以存储对象，这样在修改数据的时候，原来的数据也会发生改变。
2、left.js中挂在数据的时候， 直接挂载对象
3、right.js中也直接挂载对象就可以了
4、right.js中的addClick方法中，传入的data是每次点击左侧导航获取的所有数据， 所以data.chooseCount是给每个左侧导航添加了chooseCount属性， 而不是给spus下的每条数据添加。同学可以自己尝试在这里打印一下data的值查看一下
建议修改： 先获取到数据对象， 然后给这个数据对象设置chooseCount属性
5、right.js中如下图所示部分，应该是在传入参数的时候， 如果没有获取到数据给一个初始值， 你这样虽然不会报错， 不过建议修改了，让代码的书写更符合规范
6、shopBar.js中也需要修改为直接挂载对象， 另， 这里的chooseCount单词拼写错误。
打印结果
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星