javascript - 如何使用 JavaScript “循环”通过元素（显示/隐藏）？

Question

我有一个包含以下元素的页面：

<div id="1" style="display: block;">
[...]
</div>
    
<div id="2" style="display: none;">
[...]
</div>
    
<div id="3" style="display: none;">
[...]
</div>
    
<button id="next" onclick="ScrollNext()">
    
<button id="previous" onclick="ScrollPrevious()">

当用户单击“下一步”时，我想确定哪个 [div] 当前显示为“显示：块；” 将那个 [div] 的样式修改为“display: none;”，然后将下一个连续的 [div] 的样式修改为“display: block;” （当然，当用户单击“上一个”按钮时，我想做相反的事情）

我知道如何为按钮编写代码以这种方式切换单个元素，但是如何以编程方式确定要修改哪个元素的样式？

标签： javascript

Answer 1

我有一个使用 JavaScript 的实现，如下所示。div为了观察变化，我给了不同的颜色。我们基本上利用nextElementSibling和的previousElementSibling属性Node来向前和向后循环。找到当前的可见节点只是一个.find距离。

const divs = [...document.querySelectorAll('.container')];

function getVisibleDiv() {
  const visibleDiv = divs.find(div => div.style.display === 'block');
  return visibleDiv;
}

function next() {
  const visibleDiv = getVisibleDiv();
  visibleDiv.style.display = 'none';
  if (visibleDiv.nextElementSibling?.className === 'container')
    visibleDiv.nextElementSibling.style.display = 'block';
  else {
    divs[0].style.display = 'block';
  }
}

function previous() {
  const visibleDiv = getVisibleDiv();
  visibleDiv.style.display = 'none';
  if (visibleDiv.previousElementSibling?.className === 'container')
    visibleDiv.previousElementSibling.style.display = 'block';
  else {
    divs[divs.length - 1].style.display = 'block';
  }
}

.container {
  width: 100px;
  height: 100px;
  background: green;
}

.container:nth-child(2) {
  background: orange;
}

.container:nth-child(3) {
  background: yellow;
}

<div id="1" class='container' style="display: block;">

</div>

<div id="2" class='container' style="display: none;">

</div>

<div id="3" class='container' style="display: none;">

</div>

<button id="next" onclick="next()">Next</button>

<button id="previous" onclick="previous()">Prev</button>