在我的帖子中,我試圖添加圖片庫。我想在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;
}
你能縮小你的代碼嗎?目前閱讀並不容易。嘗試取出不影響此視圖的位更多按鈕 – Isaac
您可能確實想先緩存所有圖像,因爲您不會使用相同的圖像。如果確保所有圖像都以數字結尾,第一個數字爲0,則可以輕鬆地動態添加它們,並根據需要創建元素。只是一個評論。 – PHPglue