Question

我正在尝试为我的计算机科学项目隐藏一些图像，但是似乎没人知道为什么它不起作用？

这里有HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Fitness Programs</title>
    <script src="script.js"></script>
  </head>
<body>
 <!-- program choices -->
   <img src ="cardio.jpg" width ="350" height="200" id="cardio">
   <img src ="hiit.jpg" width = "350" height="200" class="hiit">
   <img src ="strength.jpg" width = "350" height="200" class="strength">
   <img src ="toning.jpg" width = "350" height="200" class="toning">

</body>
</html>

在这里使用Java语言

// hide images
document.getElementById("cardio").style.display = "none";
document.getElementById("hiit").style.display = "none";
document.getElementById("strength").style.display = "none";
document.getElementById("toning").style.display = "none";

Answer 1

问题是您要给第一个元素id和其余的class

您的代码告诉浏览器隐藏id为cardio，hiit，strength和toning的元素。浏览器将查找这些元素，并仅找到cardio并将其隐藏，而不会重置，因为您给了它们一个class的{{1}}实例，因此，有两种方法可以解决此问题，

1）将id更改为class，代码将起作用

2）您将id id更改为cardio并在用例2中实现代码。

用例1的示例

class

用例2范例

<img src ="cardio.jpg" width ="350" height="200" id="cardio">
<img src ="hiit.jpg" width = "350" height="200" id="hiit">
<img src ="strength.jpg" width = "350" height="200" id="strength">
<img src ="toning.jpg" width = "350" height="200" id="toning">

详细了解document.getElementsByClassName

无法使用Javascript隐藏图像

1 个答案:

用例1的示例

用例2范例