如何顯示/隱藏一定數量的div？

Question

我在嘗試顯示/隱藏一定數量的div時遇到問題。 我創建了一個動態div，它將打印所有內容，但在第5個div之后隱藏任何內容。 然后，如果我單擊“加載更多”按鈕，它將全部顯示，而“顯示更少”，則僅顯示前五個div。 我試過了，但是沒用。 這是jsfiddle。

var vidThumbnail = "";
for(i = 0, i < 25, i++)
{
  vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>';

    // if the child elements reaches 5 thumbnails, hide the rest
  if($('.section.thumbnail .thumb > .video-thumbnail:gt(5)'))
  {
      $('.section.thumbnail .thumb').append(vidThumbnail).hide();
  }
  else 
  {
      $('.section.thumbnail .thumb').append(vidThumbnail).slice(0,5);
  }
}

$('#loadMore').click(function() // show them all
{
    $('.section.thumbnail .thumb').show();
});

$('#showLess').click(function() // hide all up to the first 5 thumbnails
{ 
    $('.section.thumbnail .thumb > .video-thumbnail').slice(0,5);
});

<section class="section thumbnail">
    <h1>Thumbnail Divs</h1>
    <div class="thumb"></div>
    <div id="loadMore">Load More</div>
    <div id="showLess">Show Less</div>
</section>

Answer 1

您原來的小提琴在for循環中使用逗號而不是分號，因此初始腳本失敗了-那么它產生的dom不是您的選擇器所期望的。

這是我解決問題的方法：

https://jsfiddle.net/9pcp72bk/3/

var vidThumbnail = "";

var hideAdditionalThumbs = function() {
    var elements = $('.section.thumbnail .thumb > .video-thumbnail');
    for (var i = 5; i < elements.length; i++) {
      $(elements[i]).hide();
    }
};

$('#loadMore').click(function() // show them all
  {
    $('.section.thumbnail .thumb .video-thumbnail').show();
  });

$('#showLess').click(hideAdditionalThumbs);

for (i = 0; i < 25; i++) {
  vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>';

    $('.section.thumbnail .thumb').append(vidThumbnail);
        hideAdditionalThumbs()
}

Answer 2

我對您的代碼進行了一些編輯，現在可以正常使用： https : //jsfiddle.net/IA7medd/hc5pL6ju/

var vidThumbnail = "";
for(i = 0; i < 25; i++)
{
  vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>';
  $('.section.thumbnail .thumb').append(vidThumbnail);

    // if the child elements reaches 5 thumbnails, hide the rest
  if(i>5) {
      $('.video-thumbnail').eq(i).hide();
  }
}

$('#loadMore').click(function() // show them all
{
    $('.video-thumbnail').show();
});

$('#showLess').click(function() // hide all up to the first 5 thumbnails
{ 
    for(i=5; i<25; i++){
        $('.video-thumbnail').eq(i).hide();
  }
});