查看更多按鈕不起作用

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"; 
 

 
\t \t // add visually hidden class to items beyond maxItems 
 
\t \t $.each($items, function(idx,item){ 
 
     if(idx > maxItems - 1){ 
 
     $(this).addClass(hiddenClass); 
 
     } 
 
    }); 
 

 
\t \t // onclick of show more button show more = maxItems 
 
\t \t // if there are none left to show kill show more button 
 
\t \t $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

店，畫廊和產品都是類。

需要使用：

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

要選擇和他們的行動。的.代替#

例Fiddle

更新：

爲了隱藏負載更多按鈕使用條件 - $("." + hiddenClass).length === 0並顯示4張圖片，你的代碼是正確的只是更新條件idx < maxItems如此它對於idx - 0,1,2,3是真的，這將是四個圖像。

例子Fiddle