javascript - 单击 anchor 时显示更多 Div？

Question

我什至不确定这会被称为什么，所以我不知道要寻找什么，但我想做的是有一个固定的按钮，当它被点击时会加载更多的 div。

我有 15 个“box”类的 div，我只想显示 3 个“box”类的 div。在显示所有 15 个 div 之前，如何再显示 3 个 div？

<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>
<div class="box">text text text text</div>

<a href="#" title="">Load 3 More boxes</a>

Answer 1

您可能应该为您的 anchor 添加一个id 或一个class 以便与同一页面上的其他 anchor 区分开来。毕竟，我们不希望所有这些都添加新的 div 元素:

// Handle the click event of our anchor
$("a.addMore").on("click", function(e){
  // Show the next three hidden .box elements immediately
  $(".box:hidden:lt(3)").show(0, function(){
    // If there are no more hidden elements, remove our link
    !$(".box:hidden").length && $(e.target).remove(); 
  });
// Trigger a click to load in our first three
}).trigger("click");

演示:http://jsbin.com/amituh/5/edit