为啥加载不出来，也不报错
来源：5-4 自由编程
慕容5109188
2019-12-13 14:38:17
//copyright
var copyright = {};
copyright.copyData = [{
title:"消费者保障",
content:['保障范围','退货退款流程','服务中心','更多特色']}, {
title:"新手上路",
content:['新手专区','消费提示','交易安全','24小时在线帮助','免费开店']
}, {
title:"付款方式",
content:['快捷支付','信用卡','余额宝','蜜蜂花啊','货到付款']
}, {
title:"慕陶特色",
content:['手机慕淘','慕淘信','大众评审','B格指南']
}];
copyright.footData = {
'link':['关于慕淘','合作伙伴','营销中心','廉正举报','联系客服','开放平台','诚征英才','联系我们','网站地图','法律声明','知识产权'],
'copyright':'©2017 imooc.com All Rights Reserved'
};
copyright.buildBottom = function (copyData) {
var html = '';
html +='<div class="bottom-text fl">';
html +='<h2 class="bottom-title">'+copyData.title+'</h2>';
for (var i=0; i<copyData.content.length; i++){
html +='<a href="###" class="bottom-content link">'+copyData.content[i]+'</a>';
}
html += '</div>';
return html;
};
copyright.buildCopy = function(copyData){
var html = '';
for (var i=0; i<copyData.link.length; i++){
html +='<a href="javascript:;" class="copy">'+copyData.link+'</a>';
}
html +='<p class="copyright-bottom">'+copyData.copyright+'</p>';
return html;
};
copyright.$bottom = $('.bottom');
function each(callBackName,data) {
var html = '';
for(var index in data){
html = html + copyright.buildBottom(data[index]);
}
copyright.$bottom.html(html);
}
function show(data) {
debugger;
if(data === copyright.copyData){
each(copyright.buildBottom);
}else if (data === copyright.footData){
each(copyright.buildCopy);
}else {
return;
}
}
show(copyright.copyData);
show(copyright.footData);
<!-- bottom -->
<div class="bottom container">
</div>
<!-- copyright -->
<div class="copyright container">
</div>
/* bottom*/
.bottom{
border-top: 2px solid #858b92;
background-color: #ffff;
margin-bottom: 10px;
height: 105px;
}
.bottom-text{
width: 280px;
margin: 30px 5px 15px 15px;
}
.bottom-title{
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.bottom-content{
display: inline-block;
font-size: 12px;
height: 20px;
margin-right: 20px;
color: #858b92;
}
/* copyright*/
.copyright{
height: 60px;
text-align: center;
background-color: #cccccc;
}
.copy{
display: inline-block;
margin:15px 5px 10px 0;
color: #858b92;
}
1回答
-
好帮手慕慕子
2019-12-13
同学你好， 因为代码书写有问题，each函数需要传入对应的数据才可以对数据进行遍历，在show函数内部调用each方法时，并没有传入对应的数据，所以无法实现效果。
建议参考如下步骤调整代码：
show方法中调用buildBottom和buildCopy函数，传入对应的数据
获取copy区域的外层元素
调整buildBottom函数内部的逻辑，使用两个循环显示内容，外层循环拼接标题，内容循环拼接content内容，最后将拼接的结果添加到bottom上
调整buildCopy函数内部的代码
修改后的js代码
//copyright var copyright = {}; copyright.copyData = [{ title: "消费者保障", content: ['保障范围', '退货退款流程', '服务中心', '更多特色'] }, { title: "新手上路", content: ['新手专区', '消费提示', '交易安全', '24小时在线帮助', '免费开店'] }, { title: "付款方式", content: ['快捷支付', '信用卡', '余额宝', '蜜蜂花啊', '货到付款'] }, { title: "慕陶特色", content: ['手机慕淘', '慕淘信', '大众评审', 'B格指南'] }]; copyright.footData = { 'link': ['关于慕淘', '合作伙伴', '营销中心', '廉正举报', '联系客服', '开放平台', '诚征英才', '联系我们', '网站地图', '法律声明', '知识产权'], 'copyright': '©2017 imooc.com All Rights Reserved' }; copyright.$bottom = $('.bottom'); copyright.$copy = $('.copyright') copyright.buildBottom = function (copyData) { var html = ''; // html += '<div class="bottom-text fl">'; // html += '<h2 class="bottom-title">' + copyData.title + '</h2>'; // for (var i = 0; i < copyData.content.length; i++) { // html += '<a href="###" class="bottom-content link">' + copyData.content[i] + '</a>'; // } // html += '</div>'; // return html; for (var i = 0; i < copyData.length; i++) { html += '<div class="bottom-text fl">'; html += '<h2 class="bottom-title">' + copyData[i].title + '</h2>'; for (var j = 0; j < copyData[i].content.length; j++) { html += '<a href="###" class="bottom-content link">' + copyData[i].content[j] + '</a>'; } html += '</div>'; } copyright.$bottom.html(html); // return html; }; copyright.buildCopy = function (copyData) { var html = ''; for (var i = 0; i < copyData.link.length; i++) { // html += '<a href="javascript:;" class="copy">' + copyData.link + '</a>'; html += '<a href="javascript:;" class="copy">' + copyData.link[i] + '</a>'; } html += '<p class="copyright-bottom">' + copyData.copyright + '</p>'; copyright.$copy.html(html) // return html; }; // function each(callBackName, data) { // var html = ''; // for (var index in data) { // html = html + copyright.buildBottom(data[index]); // } // copyright.$bottom.html(html); // } function show(data) { // debugger; if (data === copyright.copyData) { // each(copyright.buildBottom); copyright.buildBottom(copyright.copyData) } else if (data === copyright.footData) { // each(copyright.buildCopy); copyright.buildCopy(copyright.footData) } else { return; } } show(copyright.copyData); show(copyright.footData);如果帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题