javascript - 如何在没有 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 attribute
function toggleClassAddEVent() {
     for (const content of document.querySelectorAll('.Container > .content')) {
          content.addEventListener('click', (e) => {
               event.stopPropagation();
               $(content).addClass('Active').siblings('.content').removeClass('Active');
               content.children[0].textContent = 'changed text';
              // console.log("Hello " + content.outerHTML + ")...");
          });
          
          triggerOutsideElement();

     }
}
// (Optional) Remove class 'Active' from all 'Active' elements when clicking outside the elements that contain the class 'Active'
function triggerOutsideElement() {
     
     $(document).click(function (e) {Hide_elementsByClickingOutSideOfThem(e);});
     
     function Hide_elementsByClickingOutSideOfThem(e) {
       
          var content = $(e.target).closest(".content").attr("class");
          if (content === "content") {
               console.log("Return True: This belongs to the content class");
          } else {
               console.log("Return false: This does not belong to the content class");
               $('.content').removeClass('Active');
          }
     }
      
}

body {
     background-color: rgba(255, 255, 255, 1);
     margin: 0px; padding: 0px;
     height: 100vh; width: 100%;
     display: flex; flex-direction: row;
     align-items: center; justify-content: center;
     overflow: hidden;
}


.Container {
     background-color: lightgray;
     margin: 10px; padding: 0;
     height: auto; width: 250px;
     display: flex; flex-direction: column;
     align-items: center; justify-content: center;
 
 }
 .content {
     background-color: lightcyan;
     margin: 5px; padding: 0;
     height: auto; width: 80%;
     display: flex; flex-direction: row;
     align-items: center; justify-content: center;
     position: relative;
 }
 .PopUp {
      display: none;
 }
 
 .Active {
      background-color: green;
      color: white;
 }
 .textContent {
      color: red;
 }
 
 .Active  .textContent {
      background-color: green;
      color: white;
 }
 .Active .PopUp {
      display: flex;
      background-color: lightcoral;
      margin: 0;
      padding: 0;
      height: 40px;
      width: 150px;
      position: absolute; z-index: 10;
      top: 0; left: -150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Container">
          <div class ="content">
               <h3 class="textContent" >content 1</h3>
               <div class="PopUp">
                    <span>PopUp 1</span>
               </div>
          </div>
          <div class ="content">
               <h3 class="textContent" >content 2</h3>
               <div class="PopUp">
                    <span>PopUp 2</span>
               </div>
          </div>
          <div class ="content">
               <h3 class="textContent" >content 3</h3>
               <div class="PopUp">
                    <span>PopUp 3</span>
               </div>
          </div>
     </div>

标签： javascripthtmlcss

Answer 1

You can use the query string .container > .content to match elements which have a class name of content which are children of an element with a class name of 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>

Also note that .map should only be used for constructing a new array. If you're not going to construct a new array, use something else. For side effects (like attaching listeners), use forEach or a for loop.