如何在沒有 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>

Answer 1

您可以使用查詢字符串.container >.content匹配具有 class 內容名稱的元素，這些元素是具有 class 名稱的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()的參數必須是 object，而不是字符串。 您想要的是document.querySelectorAll() ，它返回與選擇器匹配的所有元素的列表。 由於您要單擊<h3>按鈕，因此需要擴展選擇器以匹配它們。

您還應該使用forEach()而不是map() 。 當您想要返回一個包含在原始數組上調用 function 的結果的新數組時，使用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>