如何在页面加载时显示 nodeList 的第一个元素?
How do you show the first element of a nodeList on page loading?
我正在使用 'next' 和 'previous' 按钮循环浏览此数组中的元素。
但是我想在页面加载时显示数组的第一个元素,索引 [0],而不是必须单击 'next' 才能看到第一个元素。
最好以某种方式切换 css class 吗?或者有没有更简单的解决方案可以在 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 Fiddle:
您可以简单地用第一个 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;
});
我正在使用 'next' 和 'previous' 按钮循环浏览此数组中的元素。 但是我想在页面加载时显示数组的第一个元素,索引 [0],而不是必须单击 'next' 才能看到第一个元素。
最好以某种方式切换 css class 吗?或者有没有更简单的解决方案可以在 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 Fiddle:
您可以简单地用第一个 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;
});