Question

当我点击加载更多按钮时，它应该从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>

Answer 1

这些行似乎期望DOM元素，但divElements是包含HTML字符串的对象数组。

    if (i < divElements.length) {
        divElements[i].style.display = 'block';
    }

    if (i >= divElements.length) {
        loadMore.innerHTML = "Load Completed";
        return;
    }

您需要使用innerHTML将这些字符串插入到DOM中，然后选择生成的DOM元素才能生效。

Answer 2

您不能只编辑字符串的显示。你必须先创建一个元素。然后该元素需要附加到DOM。这是一种方法：

＆＃13;

<!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 {
    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>
<body>
<div id="container"></div>
<a href="#" id="loadMore">Load More</a>
<script>

(function() {
    var divElements = [
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/TDdxS9H.png'},
    { imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
    { imgUrl: 'http://i.imgur.com/39rpmwB.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'},
    { imgUrl: 'http://i.imgur.com/CmU3tnl.jpg'}
];
    var loadMore = document.querySelector('#loadMore');
    var divNumber = 2;

    loadMore.addEventListener('click', function(e) {
        e.preventDefault();
        var container = document.getElementById('container');
        for (var i = 0; i < divNumber; i++) {
        window.scrollTo(0,document.body.scrollHeight);
            if (i < divElements.length) {
                var element = createElement(divElements[i].imgUrl);
                container.appendChild(element);
            }

            if (i >= divElements.length) {
                loadMore.innerHTML = "Load Completed";
                return;
            }

        }
        divElements.splice(0, divNumber);

    });
})();
  loadMore.click();

function createElement(url){
    var container = document.createElement('div');
    container.setAttribute('class', 'article-loop');
    var image = document.createElement('img');
    image.setAttribute('src', url);
    container.appendChild(image);
    return container;
}

</script>
</body>
</html>

＆＃13;

始终将属性值括在引号中，永远不要将它们保留为： class = article-loop 。正确的将是class =＆＃39; article-loop＆＃39;

javascript - 加载更多按钮不起作用

2 个答案: