javascript - 使用 Jquery 或 Javascript 加载 div

Question

我在一页上有 5 个 div。类似这样的事情:

<div id="div1"> some content </div>
<div id="div2"> some content </div>
<div id="div3"> some content </div>
<div id="div4"> some content </div>
<div id="div5"> some content </div>
<button> Load More </button>

我只想加载第一个div，点击按钮“加载更多”后，然后我想加载第二个div，如果他/她再单击一次“加载更多”按钮，我想加载第三个div(但前两个div 不应该隐藏)。是否可以使用 Javascript 或 Jquery？

我是 Javascript 新手。我尝试使用这个:http://jsfiddle.net/vendettamit/QB8Hv/尝试了不同的版本，但我不能:(

我不需要使用 css 使类隐藏并显示:无。如果用户没有点击按钮，我希望这个 div 不被加载，因为我的流量很大。

Answer 1

将新类设置为“隐藏”，然后尝试以下操作:

var showNextElement = function() {
    var elements = $('.hide');
    $(elements[0]).removeClass('hide');
}

$('#btn').addEventListener('click', showNextElement);