将JS整理后显示不出来了
来源：5-4 自由编程
wss_BinAdam
2019-05-06 17:08:49
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.friendLink{
width: 100%;
padding-top: 35px;
}
.friendLink .container{
width: 1200px;
margin: 0 auto;
border-top: 1px solid #d9dde1;
height: 138px;
}
.friendLink-item{
height: 138px;
width: 213px;
padding-left: 36px;
padding-right: 50px;
text-align: left;
float: left;
}
.friendLink-item p{
font-size: 15px;
margin-top: 30px;
line-height: 29px;
color: #07111b;
}
.friendLink-item a{
font-size: 12px;
line-height: 26px;
color: #93999f;
margin-right: 19px;
display: inline-block;
}
.friendLink-item a:hover{
color: red;
}
.friendLink img{
display: block;
margin: 0 auto;
}
.footer{
width: 100%;
height: 102px;
background-color: #f3f5f7;
font-size: 12px;
}
.footer .container{
padding-top: 26px;
text-align: center;
}
.footer .container a{
color: #787d82;
display: inline-block;
margin-right: 15px;
line-height: 26px;
}
.footer .container a:last-child{
display: block;
line-height: 26px;
}
.footer .container a:hover{
color: #07111b;
}
.footer .container img{
height: 102px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 友情链接区 -->
<div class="friendLink">
<div class="container">
<img src="img/linkloading.gif" alt="" />
<!-- <div class="friendLink-item fl">
<p>消费者保障</p>
<a href="javascript:;">保障范围</a
><a href="javascript:;">退货流程</a
><a href="javascript:;">服务中心</a
><a href="javascript:;">更多特色服务</a>
</div>
<div class="friendLink-item fl">
<p>新手上路</p>
<a href="javascript:;">新手专区</a
><a href="javascript:;">消费警示</a
><a href="javascript:;">交易安全</a
><a href="javascript:;">24小时在线帮助</a
><a href="javascript:;">免费开店</a>
</div>
<div class="friendLink-item fl">
<p>付款方式</p>
<a href="javascript:;">快捷支付</a
><a href="javascript:;">信用卡</a
><a href="javascript:;">余额包</a
><a href="javascript:;">蜜蜂花啊</a
><a href="javascript:;">货到付款</a>
</div>
<div class="friendLink-item fl">
<p>幕多多特色</p>
<a href="javascript:;">手机幕多多</a
><a href="javascript:;">幕多多信</a
><a href="javascript:;">大众审评</a
><a href="javascript:;">B格指南</a>
</div> -->
</div>
</div>
<!-- 页脚区 -->
<div class="footer">
<div class="container">
<img src="img/linkloading.gif" alt="" />
<!-- <a href="javascript:;">关于幕多多</a>
<a href="javascript:;">合作伙伴</a>
<a href="javascript:;">营销中心</a>
<a href="javascript:;">联系客服</a>
<a href="javascript:;">廉政举报</a>
<a href="javascript:;">开放平台</a>
<a href="javascript:;">诚征英才</a>
<a href="javascript:;">联系我们</a>
<a href="javascript:;">网站地图</a>
<a href="javascript:;">法律声明</a>
<a href="javascript:;">知识产权</a>
<a href="javascript:;">© 2016 imooc All Rights Reserved</a> -->
</div>
</div>
<script>
//两种判断是否有jquery库的写法：
// window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script type="text/javascript">
var FKData = [{
text: '消费者保障',
items: [
[{
name: '保障范围'
}, {
name: '退货流程'
}, {
name: '服务中心'
}, {
name: '更多特色服务'
}]
]
},{
text: '新手上路',
items: [
[{
name: '新手专区',
}, {
name: '消费警示',
}, {
name: '交易安全',
}, {
name: '24小时在线帮助',
}, {
name: '免费开店',
}]
]
},{
text: '付款方式',
items: [
[{
name: '快捷支付',
}, {
name: '信用卡',
}, {
name: '余额包',
}, {
name: '蜜蜂花啊',
}, {
name: '货到付款',
}]
]
},{
text: '幕多多特色',
items: [
[{
name: '手机幕多多',
}, {
name: '幕多多信',
}, {
name: '大众审评',
}, {
name: 'B格指南',
}]
]
}]
var $FK = $('.friendLink');
var $win = $(window);
var $doc = $(document);
function lazyLoadFK() {
var items = {},
loadedItemNum = 0,
totalItemNum = FKData.length,
loadItemFn=null;
//判断加载
$doc.on('FK-show', loadItemFn = function(e, index, elem) {
if (items[index] !== 'loaded') {
$doc.trigger('FKs-loadItem', [index, elem]);
}
});
//开始加载
$doc.on('FKs-loadItem', function(e, index, elem) {
var html = buildFK(FKData),
$elem = $(elem);
items[index] = 'loaded';
loadedItemNum++;
if (loadedItemNum === totalItemNum) {
// 全部加载完毕
$doc.trigger('FKs-itemsLoaded');
}
setTimeout(function(){
$elem.html(html);
},1000);
});
$doc.on('FKs-itemsLoaded', function(e) {
console.log('FKs-itemsLoaded');
/*console.log(FKData.length);
console.log(FKData[0].text);*/
// 清除事件
$doc.off('FK-show', loadItemFn);
$win.off('scroll resize', timeToShow);
});
}
function buildFK(FKData){
var html = '';
html+='<div class="container">';
for(var i=0; i<FKData.length; i++){
html+='<div class="friendLink-item fl">';
html+='<p>'+FKData[i].text+'</p>';
for(var j=0; j<FKData[i].items[0].length; j++){
html+='<a href="javascript:;">'+FKData[i].items[0][j].name+'</a>';
}
html+='</div>';
}
html+='</div>';
return html;
}
function isVisible($elem) {
return ($win.height() + $win.scrollTop() > $elem.offset().top) && ($win.scrollTop() < $elem.offset().top + $elem.height());
}
function timeToShow(){
$FK.each(function(index,elem){
if(isVisible($(elem))){
$doc.trigger('FK-show',[index,elem]);
}
});
};
$win.on('scroll resize', timeToShow);
lazyLoadFK();
timeToShow();
/*整理*/
/*function timeToShow($elem,name){
$elem.each(function(index,elem){
if(isVisible($(elem))){
$doc.trigger(name+'-show',[index,elem]);
}
});
};*/
/*footer*/
var FTData = [{
items: [
[{
name: '关于幕多多'
}, {
name: '合作伙伴'
}, {
name: '营销中心'
}, {
name: '联系客服'
},{
name: '廉政举报'
},{
name: '开放平台'
},{
name: '诚征英才'
},{
name: '联系我们'
},{
name: '网站地图'
},{
name: '法律声明'
},{
name: '知识产权'
},{
name: '© 2016 imooc All Rights Reserved'
}]
]
}]
var $FT = $('.footer');
function FTtimeToShow(){
$FT.each(function(index,elem){
if(isVisible($(elem))){
$doc.trigger('FT-show',[index,elem]);
}
});
};
function buildFT(FTData){
var html = '';
html+='<div class="container">';
for(var i=0; i<FTData[0].items[0].length; i++){
html+='<a href="javascript:;">'+FTData[0].items[0][i].name+'</a>';
}
html+='</div>';
return html;
}
function lazyLoadFooter() {
var items = {},
loadedItemNum = 0,
totalItemNum = FTData.length,
loadItemFn=null;
//判断加载
$doc.on('FT-show', loadItemFT = function(e, index, elem) {
if (items[index] !== 'loaded') {
$doc.trigger('FT-loadItem', [index, elem]);
}
});
//开始加载
$doc.on('FT-loadItem', function(e, index, elem) {
var html = buildFT(FTData),
$elem = $(elem);
items[index] = 'loaded';
loadedItemNum++;
if (loadedItemNum === totalItemNum) {
// 全部加载完毕
$doc.trigger('FT-itemsLoaded');
}
setTimeout(function(){
$elem.html(html);
},1000);
});
$doc.on('FT-itemsLoaded', function(e) {
console.log('FT-itemsLoaded');
// 清除事件
$doc.off('FT-show', loadItemFT);
$win.off('scroll resize', FTtimeToShow);
});
}
$win.on('scroll resize', FTtimeToShow);
lazyLoadFooter();
FTtimeToShow();
</script>
</body>
</html>更改的JS
<script type="text/javascript">
/*整理*/
var $win = $(window);
var $doc = $(document);
function isVisible($elem) {
return ($win.height() + $win.scrollTop() > $elem.offset().top) && ($win.scrollTop() < $elem.offset().top + $elem.height());
}
function timeToShow($elem,name){
$elem.each(function(index,elem){
if(isVisible($(elem))){
$doc.trigger(name+'-show',[index,elem]);
}
});
};
function build(Data,callback){
var html = '';
callback();
return html;
};
function lazyLoad($elem,Data,name){
var items = {},
loadedItemNum = 0,
totalItemNum = Data.length,
loadItemFn=null;
//判断加载
$doc.on(name+'-show', loadItemFn = function(e, index, elem) {
if (items[index] !== 'loaded') {
$doc.trigger(name+'-loadItem', [index, elem]);
}
});
//开始加载
$doc.on(name+'-loadItem', function(e, index, elem) {
var html = build(Data),
$elem = $(elem);
items[index] = 'loaded';
loadedItemNum++;
if (loadedItemNum === totalItemNum) {
// 全部加载完毕
$doc.trigger(name+'-itemsLoaded');
}
setTimeout(function(){
$elem.html(html);
},1000);
});
$doc.on(name+'-itemsLoaded', function(e) {
console.log(name+'-itemsLoaded');
/*console.log(FKData.length);
console.log(FKData[0].text);*/
// 清除事件
$doc.off(name+'-show', loadItemFn);
$win.off('scroll resize', timeToShow);
});
};
$win.on('scroll resize', timeToShow);
/*友情链接区*/
var FKData = [{
text: '消费者保障',
items: [
[{
name: '保障范围'
}, {
name: '退货流程'
}, {
name: '服务中心'
}, {
name: '更多特色服务'
}]
]
},{
text: '新手上路',
items: [
[{
name: '新手专区',
}, {
name: '消费警示',
}, {
name: '交易安全',
}, {
name: '24小时在线帮助',
}, {
name: '免费开店',
}]
]
},{
text: '付款方式',
items: [
[{
name: '快捷支付',
}, {
name: '信用卡',
}, {
name: '余额包',
}, {
name: '蜜蜂花啊',
}, {
name: '货到付款',
}]
]
},{
text: '幕多多特色',
items: [
[{
name: '手机幕多多',
}, {
name: '幕多多信',
}, {
name: '大众审评',
}, {
name: 'B格指南',
}]
]
}]
var $FK = $('.friendLink');
build(FKData,function callback(){
html+='<div class="container">';
for(var i=0; i<FKData.length; i++){
html+='<div class="friendLink-item fl">';
html+='<p>'+FKData[i].text+'</p>';
for(var j=0; j<FKData[i].items[0].length; j++){
html+='<a href="javascript:;">'+FKData[i].items[0][j].name+'</a>';
}
html+='</div>';
}
html+='</div>';
})
lazyLoad($FK,FKData,FK);
timeToShow($FK,FK);
/*footer*/
var FTData = [{
items: [
[{
name: '关于幕多多'
}, {
name: '合作伙伴'
}, {
name: '营销中心'
}, {
name: '联系客服'
},{
name: '廉政举报'
},{
name: '开放平台'
},{
name: '诚征英才'
},{
name: '联系我们'
},{
name: '网站地图'
},{
name: '法律声明'
},{
name: '知识产权'
},{
name: '© 2016 imooc All Rights Reserved'
}]
]
}]
var $FT = $('.footer');
build(FTData,function callback(){
html+='<div class="container">';
for(var i=0; i<FTData[0].items[0].length; i++){
html+='<a href="javascript:;">'+FTData[0].items[0][i].name+'</a>';
}
html+='</div>';
})
lazyLoad($FT,FTData,FT);
timeToShow($FT,FT);
</script>写回答
1回答
-
好帮手慕星星
2019-05-06
你好，代码中问题较多，可以对比着下面代码修改下：
<script type="text/javascript"> /*整理*/ var $win = $(window); var $doc = $(document); function isVisible($elem) { return ($win.height() + $win.scrollTop() > $elem.offset().top) && ($win.scrollTop() < $elem.offset().top + $elem.height()); } function timeToShow($elem, name) { console.log($elem) $elem.each(function(index, elem) { if (isVisible($(elem))) { $doc.trigger(name + '-show', [index, elem]); } }); }; function build(Data, callback) { // 方法中定义的变量，在回调函数callback中是拿不到的，这个函数是传入的 // var html = ''; return callback(); // return html; }; function lazyLoad($elem, Data, name) { var items = {}, loadedItemNum = 0, totalItemNum = Data.length, loadItemFn = null; //判断加载 $doc.on(name + '-show', loadItemFn = function(e, index, elem) { if (items[index] !== 'loaded') { $doc.trigger(name + '-loadItem', [index, elem]); } }); //开始加载 $doc.on('FK-loadItem', function(e, index, elem) { // 在这调用build方法没有传入回调函数会报错，可以将回调函数分离 var html = build(Data, FKcallback), $elem = $(elem); items[index] = 'loaded'; loadedItemNum++; if (loadedItemNum === totalItemNum) { // 全部加载完毕 $doc.trigger(name + '-itemsLoaded'); } setTimeout(function() { $elem.html(html); }, 1000); }); $doc.on('FT-loadItem', function(e, index, elem) { // 在这调用build方法没有传入回调函数会报错，可以将回调函数分离 var html = build(FKData, FTcallback), $elem = $(elem); items[index] = 'loaded'; loadedItemNum++; if (loadedItemNum === totalItemNum) { // 全部加载完毕 $doc.trigger(name + '-itemsLoaded'); } setTimeout(function() { $elem.html(html); }, 1000); }); $doc.on(name + '-itemsLoaded', function(e) { console.log(name + '-itemsLoaded'); /*console.log(FKData.length); console.log(FKData[0].text);*/ // 清除事件 $doc.off(name + '-show', loadItemFn); $win.off('scroll resize', timeToShow); }); }; $win.on('scroll resize', timeToShow); /*友情链接区*/ var FKData = [{ text: '消费者保障', items: [ [{ name: '保障范围' }, { name: '退货流程' }, { name: '服务中心' }, { name: '更多特色服务' }] ] }, { text: '新手上路', items: [ [{ name: '新手专区', }, { name: '消费警示', }, { name: '交易安全', }, { name: '24小时在线帮助', }, { name: '免费开店', }] ] }, { text: '付款方式', items: [ [{ name: '快捷支付', }, { name: '信用卡', }, { name: '余额包', }, { name: '蜜蜂花啊', }, { name: '货到付款', }] ] }, { text: '幕多多特色', items: [ [{ name: '手机幕多多', }, { name: '幕多多信', }, { name: '大众审评', }, { name: 'B格指南', }] ] }] var $FK = $('.friendLink'); function FKcallback() { var html = ''; html += '<div class="container">'; for (var i = 0; i < FKData.length; i++) { html += '<div class="friendLink-item fl">'; html += '<p>' + FKData[i].text + '</p>'; for (var j = 0; j < FKData[i].items[0].length; j++) { html += '<a href="javascript:;">' + FKData[i].items[0][j].name + '</a>'; } html += '</div>'; } html += '</div>'; // 添加将html返回 return html; } // build(FKData, callback) // 字符串要添加引号,否则就是未定义的变量会报错 lazyLoad($FK, FKData, 'FK'); timeToShow($FK, 'FK'); /*footer*/ /*footer*/ var FTData = [{ items: [ [{ name: '关于幕多多' }, { name: '合作伙伴' }, { name: '营销中心' }, { name: '联系客服' }, { name: '廉政举报' }, { name: '开放平台' }, { name: '诚征英才' }, { name: '联系我们' }, { name: '网站地图' }, { name: '法律声明' }, { name: '知识产权' }, { name: '© 2016 imooc All Rights Reserved' }] ] }] var $FT = $('.footer'); function FTcallback() { var html = ''; html += '<div class="container">'; for (var i = 0; i < FTData[0].items[0].length; i++) { html += '<a href="javascript:;">' + FTData[0].items[0][i].name + '</a>'; } html += '</div>'; return html; } // build(FTData, callback1) lazyLoad($FT, FTData, 'FT'); timeToShow($FT, 'FT'); </script>如果有问题，可以接着提问。
祝学习愉快！
0
相似问题