gpt4 book ai didi

javascript - GetElementsByClassName 中的奇怪行为

转载 作者:行者123 更新时间:2023-11-28 19:01:16 26 4
gpt4 key购买 nike

我尝试获取一组图片来创建一个简单的轮播。当我尝试更改类名以显示或隐藏某些元素时,我的数组被修改,我不知道为什么......

这是我的 fiddle https://jsfiddle.net/op1nzkxc/

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="my-carousel">
<div>
<div class="car-hide">Picture 1</div>
<div class="car-hide">Picture 2</div>
<div class="car-hide">Picture 3</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>

Javascript:

pictures = [];

function getAllElementsHidden(){
return document.getElementsByClassName("car-hide");
}

function startSlide(){
pictures = getAllElementsHidden();
console.log(pictures);
pictures[1].className = "car-show";
console.log(pictures);
}

startSlide();

CSS:

body{
text-align: center;
}

ul{
text-decoration: none;
}

.car-hide{
display: none;
}

有人可以帮我吗?

最佳答案

.getElementsByClassName 返回元素的实时集合。它始终是最新的。如果您删除了使其符合资格的功能,那么它就不再存在。如果您需要保留不变的节点集合供以后使用,则需要使用 .slice 复制它;但是,由于实时集合不是 Array 而是类似数组的对象,因此我们需要获取 Array.slice 并应用它关于现场收藏:

var pictures = Array.prototype.slice.call(getAllElementsHided())

关于javascript - GetElementsByClassName 中的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32491211/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com