jQuery - 滚动到没有ID和按钮的div

Question

我有一个图库应用程序，用于显示相册中的图像。当用户访问相册页面时，我将显示所有图像（从上到下），在顶部我有下一步按钮。

如下图所示：

由于每张相册都有不同数量的图片并且是动态添加的，因此我无法添加ID并且只想一个下一个按钮。

如您所见，每张图片都有divider。如何点击下一步按钮，它会滚动/转到下一个/最近的divider。

这是我的代码：

<a href="#" id="next-button">Next</a>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="img-divider">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

Answer 1

由于jQuery需要ID到anchor-jump，因此您需要有4-5个不同的anchors并且css将它们隐藏在彼此之后并添加{{1}每个ID和每个a。

div时，请删除click。

以下代码：

HTML 的

anchor

CSS

<a href="#" id="1" class="nxt-btn">Next</a>
<a href="#" id="2" class="nxt-btn">Next</a>
<a href="#" id="3" class="nxt-btn">Next</a>
<a href="#" id="4" class="nxt-btn">Next</a>

<img src="img/divider.png" id="1">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="2">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="3">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

<img src="img/divider.png" id="4">
<div class="col-md-12">
    <img src="img/album-img.png" id="album-img">
</div>

JAVASCRIPT

.nxt-btn a{display: none}   
.nxt-btn a:first-child{display: block !important;}