javascript - 如何从相同 ID 的不同值中进行选择？

Question

所以我想让一个网页在不加载的情况下切换页面，但我似乎无法理解如何验证我的 ID 中何时有不同的不同值：

<div id='myId'>home</div>
<div id='myId'>market</div>

想要输出到：

<div id="dankMeme"></div>

这是我的脚本：

var element = document.getElementById('myId'); 
element.addEventListener('click', () => {
    switch(element.innerHTML) {
    case "market":
        document.getElementById("dankMeme").innerHTML = "you are in the market";
        break;
    case "home":
        document.getElementById("dankMeme").innerHTML = "you are in the home";
        break;
    default:
        // code block
    }
});

为什么它只适用于第一个 id ？我怎样才能使它适用于所有 ID？

标签： javascripthtml

Answer 1

对于有效的 HTML，将 ID 更改为 Class，您需要循环以将侦听器添加到多个元素

var element = document.querySelectorAll('.myNav')
element.forEach(function(item) {
  item.addEventListener('click', () => {
    switch (item.innerHTML) {
      case "market":
        document.getElementById("dankMeme").innerHTML = "you are in the market";
        break;
      case "home":
        document.getElementById("dankMeme").innerHTML = "you are in the home";
        break;
      default:
        // code block
    }
  });
})

<div class='myNav'>home</div>
<div class='myNav'>market</div>
<br>
<div id="dankMeme"></div>