data属性值取到的是字符串【object object】
请问老师为什么获取data属性值的时候是字符串呢，视频里老师也是这样传参的呀。
<!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">
</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>
</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>
</body>
</html>(function(){
// 左侧类目模板字符串
var itemTmpl = '<div class="left-item">'+
'<div class="item-text">$getItemContent</div>';+
'</div>';
// 请求数据
function getList(){
$.get('../json/food.json',function(data){
var list = data.data.food_spu_tags||[];
initContentList(list);
});
};
// 渲染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',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();
})();(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){
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',item);
$('.right-list-inner').append($target);
});
};
// 渲染顶部右侧title
function initRightTitle(str){
$('.right-title').text(str);
};
function init(data){
console.log(data)
initRightList(data.spus)||[];
initRightTitle(data.name)||'';
}
window.Right = {
refresh:init
}
})();8
收起
正在回答 回答被采纳积分+1
1回答
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星