Question

我正在尝试使用切换按钮创建图像分类器，但是我的功能仅适用于具有ID的第一张图像，而不能用于其他任何图像。

这是JS函数

function kitchen() {
  var x = document.getElementById("kitchen");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

这是html按钮

<button onclick=kitchen()>Kitchen</button>
<img src="https://picsum.photos/200/?" id="kitchen">
<img src="https://picsum.photos/200/?" id="kitchen">

我希望它在所有ID为“厨房”的图像上切换显示块，但它只在处理第一张图像。

Answer 1

应该是这样的。

function kitchen() {
  var imgs = document.getElementsByClassName("kitchen");
  for (var i = 0, img; img = imgs[i]; ++i) {
    img.style.display = img.style.display == 'none' ? 'block' : 'none';
  }
}

<button onclick="kitchen()">Kitchen</button>
<img style="display:none" src="https://picsum.photos/200/?" class="kitchen">
<img src="https://picsum.photos/200/?1" class="kitchen">

JS图像分类器不适用于多个匹配的ID元素

1 个答案: