如何顯示接下來的三個圖像單擊加載更多按鈕

Question

我需要一個加載更多按鈕來顯示圖像。 在頁面加載時，我顯示 3 張圖片，點擊加載更多按鈕后，接下來的 3 張圖片將顯示在屏幕上。

我試過下面的代碼，但它不起作用。 你會幫我解決這個問題嗎？

 $(function() { $(".item").slice(0, 2).show(); // select the first ten $("#load").click(function(e) { // click event for load more e.preventDefault(); $(".item:hidden").slice(0, 2).show(); // select next 10 hidden divs and show them if ($(".item:hidden").length == 0) { // check if any hidden divs still exist alert("No more divs"); // alert if there are none left } }); });

 .lightgallery1 a { width: 30.33%; margin: auto; display: inline-block; padding: 0px 20px 20px 0; } .lightgallery1 a img { width: 100%; } a { display: none; }

 <div class="lightgallery1"> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> </div> <a href="#" id="load">Load More</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

你的css錯了。 用：

.lightgallery1 a {
  display: none;
}

您的代碼顯示 2 張圖片。 如果要顯示 3 將.slice(0, 2)更改為.slice(0, 3)

 $(function() { $(".item").slice(0, 2).show(); // select the first ten $("#load").click(function(e) { // click event for load more e.preventDefault(); $(".item:hidden").slice(0, 2).show(); // select next 10 hidden divs and show them if ($(".item:hidden").length == 0) { // check if any hidden divs still exist alert("No more divs"); // alert if there are none left } }); });

 .lightgallery1 a { padding: 0px 20px 20px 0; display: none; } .lightgallery1 a img { width: 33%; }

 <div class="lightgallery1"> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg"></a> <a href="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg" class="item"><img src="https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> <a href="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg" class="item"><img src="https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg"></a> </div> <div> <a href="#" id="load">Load More</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

試試這個方法：

 var links = [ "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg", "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg", "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg", "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg", "https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg", "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg", "https://images.freeimages.com/images/large-previews/fe6/midsummer-fields-1-1394719.jpg", "https://galleria.io/wp-content/themes/galleria/dist/images/demo/4m.jpg", "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg", "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg", "https://images.freeimages.com/images/large-previews/851/poppies-1369329.jpg", ]; var $gallery = $(".lightgallery1").first(); var $loadMore = $("#load"); function loadMore(e) { for(var i = 0; i < 3; i++) { if(links.length) { var src = links.pop(); var $link = $("<a>"); var $img = $("<img>"); $img.attr("src", src); $link.attr("href", src).addClass("item"); $link.append($img); $gallery.append($link); } else { $loadMore.hide(); } } } $loadMore.on("click", loadMore); loadMore();

 .lightgallery1 a { width: 30.33%; margin: auto; display: inline-block; padding: 0px 20px 20px 0; } .lightgallery1 a img { width: 100%; } a { /* display: none; */ }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="lightgallery1"></div> <button id="load">Load More</button>