查看更多按钮不起作用

Question

在我的帖子中，我试图添加图片库。 我想在4张图片后显示更多加载按钮。 然后，您将按“加载更多”按钮，再出现4个，依此类推。 我已经创建了html，css和js，但是由于某种原因它无法正常工作。 谁能帮我找到解决方案？ 提前致谢。 这是小提琴https://jsfiddle.net/8zfz6hap/

html

 <div class="shop-gallery"> <div class="product"> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class="product"> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class="product"> <a href="href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class="product"> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class="product"> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class="product"> <a href="href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class='product'> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> <div class='product'> <a href="#" target="_blank"> <img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'> </a> </div> </div> <button id="load-more-comments">Load More</button> 

js

 var $parent = $("#shop-gallery"), $items = $parent.find("#product"), $loadMoreBtn = $("#load-more-comments"), maxItems = 4, hiddenClass = "visually-hidden"; // add visually hidden class to items beyond maxItems $.each($items, function(idx,item){ if(idx > maxItems - 1){ $(this).addClass(hiddenClass); } }); // onclick of show more button show more = maxItems // if there are none left to show kill show more button $loadMoreBtn.on("click", function(e){ $("."+hiddenClass).each(function(idx,item){ if(idx < maxItems - 1){ $(this).removeClass(hiddenClass); } // kill button if no more to show if($("."+hiddenClass).size() === 0){ $loadMoreBtn.hide(); } }); }); 

的CSS

 .product img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); } .product { width: 21%; height: 0; padding-top: 30%; display: inline-block; position: relative; margin-bottom: 3.5%; cursor: pointer; } .visually-hidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } 

Answer 1

shop-gallery和product都是类。

需要使用：

var $parent = $(".shop-gallery"),
    $items = $parent.find(".product")

选择并对其进行操作。 . 代替#

小提琴的例子

更新 ：

为了隐藏更多按钮，请使用条件- $("." + hiddenClass).length === 0并显示4张图像，您的代码是正确的，只需将条件更新为idx < maxItems以便对idx为true-0 ，1,2,3这将是四个图像。

小提琴的例子