如何在页面加载时显示 nodeList 的第一个元素？答案

【问题标题】：How do you show the first element of a nodeList on page loading?如何在页面加载时显示 nodeList 的第一个元素？
【发布时间】：2018-01-06 12:50:22
【问题描述】：

我正在使用“下一个”和“上一个”按钮循环浏览此数组中的元素。但是我想在页面加载时显示数组的第一个元素，索引 [0]，而不必单击“下一步”来查看第一个元素。

最好以某种方式切换 css 类吗？或者有没有更简单的解决方案可以在 JS 代码中完成？

<body>
<div id='entry1' class='entry'>
Entry1
</div>

<div class ='entry'>
Entry2
</div>

<div class ='entry'>
Entry3
</div>

<div class ='entry'>
Entry4
</div>

<p id="filler"></p>
<button id="back">PREVIOUS</button>
<button id="forward">NEXT</button>
</body>

<script>
var divs = document.querySelectorAll(".entry"); 
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function 
previous() {
if (i > 0) {
text = divs[--i].textContent;
}
document.getElementById("filler").innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function 
next(){
if (i < divs.length - 1) {
text = divs[++i].textContent;
}
document.getElementById("filler").innerHTML = text;
});
</script>

这是我的 JS 小提琴：

JS Fiddle

【问题讨论】：

只需使用onload事件：developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
使用 onload 将第一个元素加载到其中的最佳方法是什么？

标签： javascript loops iteration nodelist

【解决方案1】：

您可以使用第一个 div 的文本内容简单地初始化 p。另外你现在需要从索引0开始。

var divs = document.querySelectorAll(".entry");
var i=0;
// set the initial content to be the one from the first div
var text = divs[0].textContent;
var filler = document.getElementById("filler");
filler.innerHTML = text;

document.getElementById("back").addEventListener("click", function previous() {
  if (i > 0) {
    text = divs[--i].textContent;
  }

  filler.innerHTML = text;
});

document.getElementById("forward").addEventListener("click", function next(){
  if (i < divs.length - 1) {
    text = divs[++i].textContent;
  }

  filler.innerHTML = text;
});

【讨论】：

感谢 Tsvetan，不幸的是，这现在停在第一个元素上。您必须单击“下一步”两次才能显示下一个元素...