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

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

javascript jquery

使用JavaScript，如何使元素逐个显示,javascript,jquery,Javascript,Jquery,如何在单击按钮时使块逐个显示？单击一次=显示一个块 <div class="gallery"> <div class="block"> <div class="img"></div> </div> <div class="block"> <div class="img"></div> </div> <div cl

如何在单击按钮时使块逐个显示？单击一次=显示一个块

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

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

我创建了一个CSS类，名为

hidden

，并添加到每个块中

使用jQuery，我为按钮创建了一个click处理程序，用于查找第一个隐藏了

类的块并删除该类。这具有显示该块的结果


以下是完整的代码：
<!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>


.hidden{显示：无；}
第一街区
第二街区
第三街区
第四街区
点击我
$（函数（）{
$（'#btn'）。单击（函数（）{
$（'.gallery.hidden'）.first（）.removeClass（'hidden'）；
});
});
首先使用css设置所有不可见的块：
.block { display: none; }

然后，将处理程序添加到按钮并使第一个不可见：
$("#btn").on("click", function () {
   $(".gallery").find(".block:hidden").first().css({ display: "block"; });
});

仅使用js

var计数=0；
函数i（）{
items=document.getElementsByClassName（“块”）；
如果（计数<项目长度）
项[count++].style.display=“block”；
}
.block{
显示：无；
}

1.
2.
3.
4.
一个接一个地出现
您可以只显示第一个不可见的。为了稍作改进，我们在dom加载时缓存隐藏块列表（$blocks
），而不是查找每个函数调用的可见性
在功能结束时，将更新可见块列表（显示已切换的块）
注意：这不适用于在初始dom加载之后添加的动态添加块，但是代码可以很容易地为此进行更新

$blocks=$（'.block:not（：visible'）；
函数showBlock（）{
var$block=$blocks.first（）.css（'display'，'block'）；
$blocks=$blocks.not（$block）；
}
.block{
显示：无；
}

一
二
三
四
Show Block
您的代码中有几个打字错误（：不（：可见）
和css后面的额外的；
）。但即使你改变了这些，它仍然不起作用。这将一次显示所有内容。似乎有很多方法可以使其工作，但我找不到任何人：（我需要更多的练习谢谢，@putvande，我真的错过了第一个元素的要点，我只在我的文本中解释了，但没有在代码中解释。我纠正了这一点。我还简化了选择器，因此它不再需要否定。对于css中的分号，这是一个品味问题，请参见