使用javascript显示默认的div数量

Question

我想在用户点击“加载更多”按钮之前显示默认的div数量。目前，它不显示任何默认div，我希望在用户点击加载更多按钮之前显示/显示5个默认div。

http://codepen.io/anon/pen/PpzeKB

(function() {
  var divElements = [].slice.call(document.querySelectorAll("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);

  });
})();

body {
  background-color: #f6f6f6;
  width: 400px;
  margin: 60px auto;
  margin-top: 5px;
  font: normal 13px/100% sans-serif;
  color: #444;
}

img {
  width: 15px;
  height: 15px;
}

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;
}

<div> <img src="http://i.imgur.com/CmU3tnl.jpg"> 1 </div>
<div> <img src="http://i.imgur.com/TDdxS9H.png"> 2 </div>
<div> <img src="http://i.imgur.com/39rpmwB.jpg"> 3 </div>
<div> <img src="http://i.imgur.com/1lBZQ1B.png"> 4 </div>
<div> <img src="https://i.imgur.com/Y5Ld4Qfh.jpg"> 5 </div>
<div> <img src="http://i.imgur.com/8HumESY.jpg"> 6 </div>
<div> <img src="http://i.imgur.com/CqCZBvk.png"> 7 </div>
<div> <img src="http://i.imgur.com/wQVPRVp.png"> 8 </div>
<div> <img src="http://i.imgur.com/9inrOjD.png"> 9 </div>
<div> <img src="http://i.imgur.com/jv0QZgx.jpg"> 10</div>
<div> <img src="http://i.imgur.com/xWmaeb6.png"> 11</div>
<div> <img src="http://i.imgur.com/t73lyDn.png"> 12</div>

<a href="#" id="loadMore">Load More</a>

Answer 1

直接的方法是使用javascript添加display: block，例如：

var divInitialNumber = 5;
for (var i =0; i<divInitialNumber; i++) {
  divElements[i].style.display = 'block';
}
divElements.splice(0, divInitialNumber);

所以你的整个javascript代码就像

(function() {
var divElements = [].slice.call(document.querySelectorAll("div"));
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;
var divInitialNumber = 5;

for (var i =0; i<divInitialNumber; i++) {
  divElements[i].style.display = 'block';
}
divElements.splice(0, divInitialNumber);

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);

});
})();

Answer 2

如果你真的硬编码了这样的HTML元素，你可以添加一个额外的CSS类：

<!-- HTML --> 
<div class="show-default"> whatever </div> <!-- do this for the first five elements --> 
<div> more images </div> 

// CSS 
div.show-default {
  display: block; 
}

Answer 3

在你的外部功能结束之前，假装你是'＃34; loading＆＃34;另外五个div，然后将divNumber重置为原始值，以便后续点击只加载两个新条目：

divNumber = 5;
loadMore.click();
divNumber = 2;

演示

＆＃13;

＆＃13;

(function() {
  var divElements = [].slice.call(document.querySelectorAll("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);
  });

  // Added!
  divNumber = 5;
  loadMore.click();
  divNumber = 2;
  
})();

＆＃13;

body {
  background-color: #f6f6f6;
  width: 400px;
  margin: 60px auto;
  margin-top: 5px;
  font: normal 13px/100% sans-serif;
  color: #444;
}

img {
  width: 15px;
  height: 15px;
}

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;
}

＆＃13;

<div> <img src="//i.imgur.com/CmU3tnl.jpg"> 1 </div>
<div> <img src="//i.imgur.com/TDdxS9H.png"> 2 </div>
<div> <img src="//i.imgur.com/39rpmwB.jpg"> 3 </div>
<div> <img src="//i.imgur.com/1lBZQ1B.png"> 4 </div>
<div> <img src="//i.imgur.com/Y5Ld4Qfh.jpg"> 5 </div>
<div> <img src="//i.imgur.com/8HumESY.jpg"> 6 </div>
<div> <img src="//i.imgur.com/CqCZBvk.png"> 7 </div>
<div> <img src="//i.imgur.com/wQVPRVp.png"> 8 </div>
<div> <img src="//i.imgur.com/9inrOjD.png"> 9 </div>
<div> <img src="//i.imgur.com/jv0QZgx.jpg"> 10</div>
<div> <img src="//i.imgur.com/xWmaeb6.png"> 11</div>
<div> <img src="//i.imgur.com/t73lyDn.png"> 12</div>

<a href="#" id="loadMore">Load More</a>

＆＃13;

＆＃13;

＆＃13;