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一起使用？

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>

Answer 2

id属性指定HTML元素的唯一ID（该值在HTML文档中必须是唯一的）。

CSS和JavaScript可以使用ID值对具有特定ID值的元素执行某些任务。

在CSS中，要选择具有特定ID的元素，请写一个井号（＃）字符，后跟该元素的ID

如何从同一ID的不同值中进行选择？

2 个答案: