时间戳

首页 > 解决方案 > 如何使用javascript为页面中的所有元素添加事件监听器，它们的ID在我的数组中

javascript - 如何使用javascript为页面中的所有元素添加事件监听器，它们的ID在我的数组中

问题描述

我的页面中有带有 ID 的元素。我还有一个数组，其中包括 Id。

const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
]
for (var i = 0; i < locations.length; i++) {
  var ids = locations[i].location;
  console.log(ids);
}
<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

它给了我所有的位置。现在我想为我的页面中的所有对象添加事件监听器，其中数组包含使用 javascript 的 ID。

标签： javascriptarraysevent-listener

解决方案

通过 id 获取元素并在其上添加事件侦听器功能 element.addEventListener("click", myFunction); 出于演示目的，相应的 div 在单击时将具有红色。

评论后编辑

通过 id 搜索后检查元素是否存在：

const element = document.getElementById(locationId)
if (element) {
  // add listener
}


const locations = [{
    "location": "hauptbahnhof",
    "color": "Magenta"
  },
  {
    "location": "Kröpke",
    "color": "Yellow"
  },
  {
    "location": "KröpckeUhr",
    "color": "Green"
  },
  {
    "location": "nonExistingElement",
    "color": "Green"
  },
]

for (var i = 0; i < locations.length; i++) {
  var locationId = locations[i].location;
  console.log(locationId);
  const element = document.getElementById(locationId)
  if (element) {
    element.addEventListener("click", myFunction);

    function myFunction() {
      element.style.color = "red";
    }
  } else {
    // ID is not in the html elements
  }
}
<div id="container">
  <div id="hauptbahnhof">Hauptbahnhof</div>
  <div id="Kröpke">Kröpke</div>
  <div id="example">no event on this</div>
  <div id="KröpckeUhr">Kröpcke Uhr</div>
  <div id="Drumstreet">Drumstreet</div>
</div>

推荐阅读