为什么我的函数不能正确识别元素的样式？

Question

我有三个 div。当页面 loads.After 单击按钮时，只有第一个可见，第二个 div 变得可见。再次点击后，第三个 div 也应该可见，但没有，我不明白为什么。

我正在通过检查 div 是否已经可见的 js“if 语句”更改 divs 的显示。

我是不是做错了什么？

function displayMore() {
  if (document.getElementById("div_02").style.display == "none") {
    document.getElementById("div_02").style.display = "block";
  } else if (document.getElementById("div_03").style.display == "none") {
    document.getElementById("div_03").style.display = "block";
  }
}

#div_01 {
  width: 100%;
  height: 50px;
  background: purple;
}

#div_02 {
  display: none;
  width: 100%;
  height: 50px;
  background: violet;
}

#div_03 {
  display: none;
  width: 100%;
  height: 50px;
  background: pink;
}

<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>
<input type="button" onclick="displayMore();" value="Display More">

Answer 1

这是一个使用计数器变量的解决方案。计数器代表您当前的 div，当您添加一个新的 div 然后增加您的计数器。您可以使用 nextElementSibling 设置下一个元素的样式。

let counter = 0;

function displayMore() {
  let currentDiv = document.getElementsByTagName("div")[counter];
  console.log(currentDiv.nextElementSibling.style.display)
  currentDiv.nextElementSibling.style.display = "block";
  counter++;

}

#div_01 {
  width: 100%;
  height: 50px;
  background: purple;
}

#div_02 {
  display: none;
  width: 100%;
  height: 50px;
  background: violet;
}

#div_03 {
  display: none;
  width: 100%;
  height: 50px;
  background: pink;
}

<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>
<input type="button" onclick="displayMore();" value="Display More">

为什么我的函数不能正确识别元素的样式？

Why does my function not recognize the style of an element correctly?

javascript

if-statement

display

为什么我的函数不能正确识别元​​素的样式？

Why does my function not recognize the style of an element correctly?

javascript

if-statement

display

为什么我的函数不能正确识别元素的样式？