javascript - 5 秒后使用 javascript 使所有图像具有相同的 id 可见

Question

我有一个产品图像网格，我希望使用 javascript 在 5 秒后显示具有相同 ID 的所有图像。目前，它仅适用于第一张图像，而其他图像则保持隐藏状态，并且都具有相同的 id。我希望它适用于具有相同 ID 的所有图像。

/html 示例/

<div class"product1 image">
<img src="image1.jpg" id="myid">
</div>

<div class"product2 image">
<img src="image2.jpg" id="myid">
</div>

/CSS 示例/

.image {
    visibility: hidden;
}

/js 示例/

<script type="text/javascript">
function change () {
  var image = document.getElementById ("myid");
    image.style.visibility = "visible";
}
setTimeout ("change ();", 5000);
</script>

Answer 1

页面中只能有一个具有特定 ID 的元素。 getElementById 返回单个元素，因此可能只是找到屏幕中的第一个项目。

您可以给它们一个具有相同名称的 css 类，或者使用 data-* 属性来标识它们，例如

<img src="image2.jpg" data-image-group="bob" />

然后这将返回与该组名称匹配的所有元素:

let matchedImages = document.querySelectorAll("[data-image-group='bob']")

matchedImages .forEach(function(image) {
  image.style.visibility = "visible";
});

或者(这可能是最好的方法)，考虑使用纯CSS方法来处理这个显示问题，并使用动画让它们最初隐藏然后淡入。可以在这个答案中找到这样的示例:

Using CSS for a fade-in effect on page load