Jquery链接一次一个地显示div？

Question

我有一个包含5个div的页面。默认情况下只显示其中一个 - 其他4个用css隐藏。我有一个按钮，我希望能够点击并按顺序显示一个额外的div 一个。换句话说......第一次点击链接会显示div＃2，第二次点击会显示div＃3，第三次点击会显示div＃4，最后点击会显示所有5个div。

我对show / hide方面很好但是如何让链接继续显示序列中的下一个div？

Answer 1

实现此操作的一种简单方法是通过分配像div1，div2，div3等ID来对div进行编号。

然后，它只是跟踪可见div的数量。在按钮的单击事件处理程序中，您递增计数并生成要显示的下一个div的id。

同时添加一项检查以查看可见div的计数是否等于要显示的总div。

interface{}

Answer 2

你总是可以访问每个div的显示来获取display属性的值，因为据我所知jquery hide()函数只是将显示设置为none，反正。

您可以编写一个检查这些值的函数 - 就像另一张海报所说，使用顺序ID命名div可能是一个想法：

<div id="div-0"></div>
<div id="div-1"></div>

依此类推...然后在循环中构建你的jquery选择器并检查display属性：

for (divNo = 0; divNo < numberOfDivs; divNo++) {
    if ($("#div-" + divNo.toString()).css("display") == none) {
        // Show this div and bail.
        // ...
    }
}