如何在没有 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')) {&nbsp; content.addEventListener('click', (e) => {&nbsp; &nbsp; content.style.backgroundColor = 'yellow';&nbsp; &nbsp; content.children[0].textContent = 'changed text';&nbsp; &nbsp; console.log("Hello " + content.outerHTML + ")...");&nbsp; });}body {&nbsp; background-color: rgba(255, 255, 255, 1);&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; height: 100vh;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}.Container {&nbsp; background-color: lightgray;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; height: auto;&nbsp; width: 250px;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}.content {&nbsp; background-color: lightcyan;&nbsp; margin: 5px;&nbsp; padding: 0;&nbsp; height: auto;&nbsp; width: 80%;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}h3 {&nbsp; color: red;}<div class="Container">&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 1</h3>&nbsp; </div>&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 2</h3>&nbsp; </div>&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 3</h3>&nbsp; </div></div>另请注意，.map仅应用于构造新数组。如果您不打算构造新数组，请使用其他数组。对于副作用（例如附加侦听器），请使用forEach或for循环。

Answer 2

的参数Object.entries()必须是一个对象，而不是字符串。您想要的是document.querySelectorAll()，它返回与选择器匹配的所有元素的列表。由于您想要单击<h3>按钮，因此需要扩展选择器以匹配它们。您还应该使用forEach()而不是map(). map()当您想要返回包含在原始数组上调用函数的结果的新数组时使用。如果您只想对数组元素执行操作，则不需要返回新数组。document.querySelectorAll('.Container > .content > h3').forEach((element) => {&nbsp; element.addEventListener("click", function() {&nbsp; &nbsp; // Output innerHTML of the clicked element&nbsp; &nbsp; console.log("Hello " + this.innerHTML);&nbsp; });});body {&nbsp; background-color: rgba(255, 255, 255, 1);&nbsp; margin: 0px;&nbsp; padding: 0px;&nbsp; height: 100vh;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}.Container {&nbsp; background-color: lightgray;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; height: auto;&nbsp; width: 250px;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}.content {&nbsp; background-color: lightcyan;&nbsp; margin: 5px;&nbsp; padding: 0;&nbsp; height: auto;&nbsp; width: 80%;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; overflow: hidden;}h3 {&nbsp; color: red;}<div class="Container">&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 1</h3>&nbsp; </div>&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 2</h3>&nbsp; </div>&nbsp; <div class="content">&nbsp; &nbsp; <h3>content 3</h3>&nbsp; </div></div>