1

我什至不确定这会被称为什么，所以我不知道要寻找什么，但我想要做的是有一个固定的按钮，当它被点击时会加载更多的 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>
4

3 回答 3

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

于 2012-05-16T03:32:07.200 回答
0 
<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);
}
于 2012-05-16T08:43:30.560 回答
0

看到这个小提琴（更新删除锚）：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你的锚。

于 2012-05-16T03:34:41.087 回答