为什么只加载出了第一个DIV标签？
来源：5-4 自由编程
wss_BinAdam
2019-05-05 23:04:07
<!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;
}
.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;
}
</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>
<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 lazyLoadFloorImgs() {
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[index]),
$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);
});
}
function buildFK(FKData){
var html = '';
html+='<div class="container">';
for(var i=0; i<FKData.items.length; i++){
html+='<div class="friendLink-item fl">';
html+='<p>'+FKData.text+'</p>';
for(var j=0; j<FKData.items[i].length; j++){
html+='<a href="javascript:;">'+FKData.items[i][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))){
//console.log('121');
$doc.trigger('FK-show',[index,elem]);
}
});
}
lazyLoadFloorImgs();
timeToShow();
</script>
</body>
</html>为什么没有循环加载呢？
写回答
1回答
-
你好，是代码中只有一个friendLink元素的原因，使用each循环，index索引为0，所以只显示出来了一个，可以不使用index参数，如下：
拼接的地方重新写一下，现在是循环所有的数据：
测试出来是垂直显示的，因为每个div独占一行，可以添加浮动效果，如下：
效果：
可以测试下，祝学习愉快！
0
相似问题