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

Question

挑出来。感谢所有帮助我的人，当 id 属性丢失时（或者由于某种原因不允许调用单个元素时），如何在页面上的多个 DIV 元素上调用 JavaScript 代码。我希望能够通过更改背景颜色（内容）和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>

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

的参数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>