1

これが何と呼ばれるかさえわからないので、何を探すべきかわかりませんが、私がやろうとしているのは、クリックするとより多くのdivをロードする固定ボタンを持つことです。

「ボックス」のクラスを持つ 15 の div があり、「ボックス」のクラスを持つ 3 つの 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 に答える