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

您可能应该在锚点中添加id或class，以便将其与同一页面上的其他锚点区分开来。毕竟，我们不希望所有这些元素都添加新的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

Answer 2

查看此小提琴（已更新以删除锚点）：http://jsfiddle.net/MaqYL/5/

最初：

   $(".box:gt(2)").hide();

点击锚点：

$("a").click(function(){
    var hiddens = $(".box:hidden");
    hiddens.slice(0,3).show();
    if(hiddens.length <= 3)
    {
        $(this).remove();
    }    
});

为了防止其他锚点这样做，你最好给你的锚点id。

Answer 3

<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 id="garage" style="display:none">
  <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>

<a href="javascript:next3();" title="">Load 3 More boxes</a>

function next3() {
  var box = document.getElementById("garage");
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
  if(box.firstElementChild) box.parentNode.insertBefore(box.firstElementChild, box);
}

单击锚点时显示更多Div？

3 个答案: