Question

我有5个街区，他们一个接一个地出现（4个街区），除了最后一个（街区＃5），我不明白为什么最后一个不想要。当显示所有块时，隐藏并且一切都重新开始。如果你解释我为什么会这样，我将不胜感激。

＆＃13;

$(function() {
  $('div').addClass('hidden');
  var i = setInterval(showBlock, 1000);

  function showBlock() {
    var x = $("div.hidden:first").removeClass("hidden");
    if ($("div.hidden").length === 0) {
      $('div').addClass('hidden');
    }
  }
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

＆＃13;

Answer 1

我不确定我是否理解你。我知道它运作良好，直到第4块产生，然后第5块不会产卵但是所有desapear？如果是这样，则问题出在您的“代码”顺序中。

首先从“div”中删除“隐藏”类“

 var x = $("div.hidden:first").removeClass("hidden");

然后在同一次迭代中，你检查是否有任何“隐藏的div”，如果没有，那么你将隐藏所有的“div”。

if ($("div.hidden").length === 0) {
      $('div').addClass('hidden');
    }

我认为如果您更改订单并将返回添加到“if”

，它应该可以正常工作

if ($("div.hidden").length === 0) {
  $('div').addClass('hidden');
  return
}
var x = $("div.hidden:first").removeClass("hidden");

Answer 2

看看这个例子：

drawable-xxhdpi

$(function() {
  $('div').addClass('hidden');
  var i = setInterval(showBlock, 1000);

  function showBlock() {
    var x = $("div.hidden:first").removeClass("hidden");
    if ($("div.hidden").length === 0) {
      clearInterval(i);
    }
  }
});

.hidden {
  display: none;
}

您的代码会一次又一次地运行，因为您永远不会停止您设置的计时器。

Answer 3

一旦div 5显示该函数将所有div设置为隐藏，添加这样的1秒超时并且它将起作用

setTimeout(function(){ $('div').addClass('hidden'); }, 1000);

如何用javasctipt隐藏所有块

3 个答案: