如何在没有 ID 属性的多个 DIV 元素上调用 JavaScript 代码？

Question

挑出来。感谢所有帮助我的人如何在页面上的多个 DIV 元素上调用 JavaScript 代码，当缺少 id 属性时（或者由于某种原因不允许调用单个元素时）。我希望能够通过更改背景颜色（内容）和h 标签的颜色（单击它的位置）对每个元素执行一些操作，但我不想单独访问每个元素。Object.entries('.Container').map(( object ) => {          object[1].addEventListener("click", function() {               // Output innerHTML of the clicked element               console.log("Hello " + this +  " (" + this.innerHTML + ") from map method...");          });     });  body {               background-color: rgba(255, 255, 255, 1);               margin: 0px; padding: 0px;               height: 100vh; width: 100%;               display: flex; flex-direction: column;               align-items: center; justify-content: center;               overflow: hidden;          }          .Container {              background-color: lightgray;              margin: 0; padding: 0;              height: auto; width: 250px;              display: flex; flex-direction: column;              align-items: center; justify-content: center;              overflow: hidden;                     }          .content {              background-color: lightcyan;              margin: 5px; padding: 0;              height: auto; width: 80%;              display: flex; flex-direction: row;              align-items: center; justify-content: center;              overflow: hidden;                     }          h3 {               color: red;          }  <div class="Container">          <div class ="content"><h3>content 1</h3></div>          <div class ="content"><h3>content 2</h3></div>          <div class ="content"><h3>content 3</h3></div>     </div>最终决议：toggleClassAddEVent();triggerOutsideElement();// Call   multiple DIV elements without the ID attributefunction toggleClassAddEVent() {     for (const content of document.querySelectorAll('.Container > .content')) {          content.addEventListener('click', (e) => {

Answer 1

您可以使用查询字符串.container > .content来匹配具有类名的元素，这些元素是具有类名content的元素的子级container：

for (const content of document.querySelectorAll('.Container > .content')) {

  content.addEventListener('click', (e) => {

    content.style.backgroundColor = 'yellow';

    content.children[0].textContent = 'changed text';

    console.log("Hello " + content.outerHTML + ")...");

  });

}

body {

  background-color: rgba(255, 255, 255, 1);

  margin: 0px;

  padding: 0px;

  height: 100vh;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.Container {

  background-color: lightgray;

  margin: 0;

  padding: 0;

  height: auto;

  width: 250px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.content {

  background-color: lightcyan;

  margin: 5px;

  padding: 0;

  height: auto;

  width: 80%;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

h3 {

  color: red;

}

<div class="Container">

  <div class="content">

    <h3>content 1</h3>

  </div>

  <div class="content">

    <h3>content 2</h3>

  </div>

  <div class="content">

    <h3>content 3</h3>

  </div>

</div>

另请注意，.map仅应用于构造新数组。如果您不打算构建一个新数组，请使用其他东西。对于副作用（如附加侦听器），请使用forEach或for循环。

Answer 2

to 的参数Object.entries()必须是一个对象，而不是一个字符串。您想要的是document.querySelectorAll()，它返回与选择器匹配的所有元素的列表。由于您要单击<h3>按钮，因此需要扩展选择器以匹配它们。

您还应该使用forEach()而不是map(). map()当您想要返回一个包含在原始数组上调用函数的结果的新数组时使用。如果您只想对数组元素执行操作，则不需要返回新数组。

document.querySelectorAll('.Container > .content > h3').forEach((element) => {

  element.addEventListener("click", function() {

    // Output innerHTML of the clicked element

    console.log("Hello " + this.innerHTML);

  });

});

body {

  background-color: rgba(255, 255, 255, 1);

  margin: 0px;

  padding: 0px;

  height: 100vh;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.Container {

  background-color: lightgray;

  margin: 0;

  padding: 0;

  height: auto;

  width: 250px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

.content {

  background-color: lightcyan;

  margin: 5px;

  padding: 0;

  height: auto;

  width: 80%;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}

h3 {

  color: red;

}

<div class="Container">

  <div class="content">

    <h3>content 1</h3>

  </div>

  <div class="content">

    <h3>content 2</h3>

  </div>

  <div class="content">

    <h3>content 3</h3>

  </div>

</div>