Question

单击按钮时如何逐个显示块？单击=出现一个块。

<div class="gallery">
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
    <div class="block">
        <div class="img"></div>
    </div>
</div>
<button id="btn"></button>

Answer 1

下面是一个使用jQuery的工作示例（如标签中所述）。有几点需要注意：

我创建了一个名为hidden的CSS类，并添加到每个块中。
使用jQuery，我为他的按钮创建了一个单击处理程序，它找到了带有hidden类的第一个块并删除了该类。这具有显示该块的结果。

以下是完整的代码：

<!doctype html>
<html>
<head>
    <style>
        .hidden { display: none; }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div class="gallery">
        <div class="block hidden">
            <div class="img"></div>
            first block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            second block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            third block
        </div>
        <div class="block hidden">
            <div class="img"></div>
            fourth block
        </div>
    </div>
    <button id="btn">Click me</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                $('.gallery .hidden').first().removeClass('hidden');
            });
        });
    </script>
</body>
</html>

Answer 2

仅使用js

＆＃13;

var count = 0;
function i(){
	items = document.getElementsByClassName("block");
    if(count < items.length)
       	items[count++].style.display = "block";
}

＆＃13;

.block{
    display: none;
}

＆＃13;

<div class="gallery">
     <div class="block">
           <div class="img">1</div>
     </div>
     <div class="block">
           <div class="img">2</div>
     </div>
     <div class="block">
     <div class="img">3</div>
           </div>
     <div class="block">
     <div class="img">4</div>
     </div>
</div>
<button id="btn" onclick="i()">appear one by one</button>

＆＃13;

Answer 3

你可以只显示第一个不可见的。为了稍微改进，我们不是查找每个函数调用的可见性，而是在dom load处缓存隐藏块列表（$blocks）。

在函数结束时，会更新可见块列表（显示已切换的列表）。

注意：这不适用于在初始dom加载后添加的动态添加的块，但代码可以很容易地更新。

＆＃13;

$blocks = $('.block:not(:visible)');

function showBlock() {
  var $block = $blocks.first().css('display', 'block');
  $blocks = $blocks.not( $block );
}

＆＃13;

.block {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gallery">
  <div class="block">
    <div class="img"></div>
    one
  </div>
  <div class="block">
    <div class="img"></div>
    two
  </div>
  <div class="block">
    <div class="img"></div>
    three
  </div>
  <div class="block">
    <div class="img"></div>
    four
  </div>
</div>
<button id="btn" onclick="showBlock()">Show Block</button>

＆＃13;

Answer 4

首先用css设置所有块不可见：

{
  "data": {
    "add": 579
  }
}

然后，在按钮上添加一个处理程序，使第一个不可见的可见：

.block { display: none; }

使用JavaScript，如何逐个显示元素

4 个答案: