点击按钮div显示1×1(一次一个)

Question

我有10个<div>同一个班级.我希望在页面加载时只有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，然后定位下一个并显示它。