javascript - 单击按钮 div 显示 1 x 1(一次一个)

Question

我有 10 个 <div>与同一个类(class)。我希望只有 2 个 div 在页面加载时可见，并且在单击加载更多按钮后应该显示下一个 div。这样，在单击每个加载更多按钮后，应该显示下一个隐藏 div。

我已尝试使用以下代码但无法成功。

<script type="text/javascript">
    $( "#loadmore" ).click(function() {
        $(".design-derection").one( "div" ).show();
    });
    </script>

HTML 结构是

<div class='content-block'>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class="view-more" id="loadmore">
                <a href="javascript:void(0);">View More Ranges</a>
            </div>
</div>

Answer 1

你可以这样做。

$( "#loadmore" ).click(function() {
    $(".design-derection:visible").last().next().show()
});

只需定位最后一个可见的 div，然后显示下一个可见的 div。