当我单击“加载更多”按钮时，它应该从 divElements 数组中获取内容并按页面正确对其进行切片，但它无法正常工作。
整个 HTML 页面包括 JS 函数。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
}
img{
width:30px;
height:30px;
}
div {
display:none;
padding: 10px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
margin-bottom: 5px;
background-color: #f1f1f1;
}
.totop {
position: fixed;
bottom: 10px;
right: 20px;
}
.totop a {
display: none;
}
a, a:visited {
color: #33739E;
text-decoration: none;
display: block;
margin: 10px 0;
}
a:hover {
text-decoration: none;
}
#loadMore {
padding: 10px;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
}
#loadMore:hover {
background-color: #fff;
color: #33739E;
}
</style>
</head>
<a href="#" id="loadMore">Load More</a>
<script>
(function() {
var divElements = [
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/TDdxS9H.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/39rpmwB.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/1lBZQ1B.png></div>"},
{ adName: "<div class=article-loop><img src=https://i.imgur.com/Y5Ld4Qfh.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/8HumESY.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CqCZBvk.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/wQVPRVp.png></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"},
{ adName: "<div class=article-loop><img src=http://i.imgur.com/CmU3tnl.jpg></div>"}
];
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;
loadMore.addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < divNumber; i++) {
window.scrollTo(0,document.body.scrollHeight);
if (i < divElements.length) {
divElements[i].style.display = 'block';
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
}
divElements.splice(0, divNumber);
});
})();
loadMore.click();
</script>
</body>
</html>
最佳答案
这些行似乎需要 DOM 元素，但 divElements 是包含 HTML 字符串的对象数组。
if (i < divElements.length) {
divElements[i].style.display = 'block';
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
您需要使用 innerHTML 将这些字符串插入到 DOM 中，然后选择生成的 DOM 元素才能正常工作。
关于javascript - 加载更多按钮不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45023673/