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

Question

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

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

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

use*_*559 5

下面是一个使用jQuery的工作示例(如标记中所述).有几点需要注意:

我创建了一个CSS类,hidden并将其添加到每个块中.
使用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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	926 次
最近记录：	9 年，4 月前