Question

在我的帖子中，我正在尝试添加图片库。我希望在4张图像后显示更多加载按钮。然后你会按下加载更多按钮，再显示4个，依此类推。我创建了html，css和js，但由于某种原因它无法正常工作。任何人都可以帮我找到解决方案吗？提前致谢。这是小提琴https://jsfiddle.net/8zfz6hap/

HTML

＆＃13;

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

＆＃13;

JS

＆＃13;

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();
        }
      });
    });

＆＃13;

CSS

＆＃13;

.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; 
}

＆＃13;

Answer 1

商店图库和产品都是课程。

需要使用：

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

选择和操作它们。 .代替#

示例Fiddle

<强>更新：

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

示例Fiddle

查看更多按钮不起作用

1 个答案: