javascript：由於相同的類名，2 個切換無法在同一頁面上工作

Question

我是 JS 新手，我遇到了一個問題，我在同一頁面上添加了 2 個相同的站點核心模塊，其中有 2 個相同的腳本來切換 class 名稱。

var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
    var itemClass = this.parentNode.className;
    for (i = 0; i < accItem.length; i++) {
        accItem[i].className = 'accordionItem close';
    }
    if (itemClass == 'accordionItem close') {
        this.parentNode.className = 'accordionItem open';
    }
}

問題是由於類名相同，只有一個模塊單擊有效。 現在我如何使用“this”來解決我的問題，盡管類名相同，兩個模塊都應該可以工作？

編輯：HTML 代碼：

<div class="accordionContent">
 <div class="accordionItem close" style="display: block;">
   CONTENT
 </div>
</div>
<div class="accordionContent">
 <div class="accordionItem close" style="display: block;">
  CONTENT
 </div>
</div>

Answer 1

我無法讓您的 HTML 正常工作，但我將在 toggleItem function 中嘗試的方法如下：

var accHD = document.getElementsByClassName('accordionItemHeading');

for (i = 0; i < accHD.length; i++) {
    accHD[i].addEventListener('click', toggleItem, false);
}

function toggleItem() {
  // get the parent accordion element
  let parentAccordion = this.closest(".accordionContent");
  // get all the accordion items within the parent
  let itemsInParent = parentAccordion.querySelectorAll(".accordionItem");
  // make them all closed
  itemsInParent.forEach(item => item.className = 'accordionItem close');
  // make this one open
  this.parentNode.className = 'accordionItem open';
}

Answer 2

因此，在您的腳本中，您指的是手風琴標題，但它並未包含在您的 HTML 中。 我假設您想使用這些標題作為激活切換機制的標題。 因為您的 HTML 代碼不完整，所以我根據我認為您的代碼正常工作所需的內容創建了一個可能的示例。

真的沒有太大區別，你寫的大部分代碼都沒有問題。 我剛剛將event參數添加到 function 切換。 這樣就可以追溯觸發點擊事件的目標（手風琴標題），從那里我們可以例如獲取父級（手風琴容器），然后我們可以從那里返回 go 以找到其中的實際元素手風琴項容器。

 let accordionHeadings = document.getElementsByClassName('accordionHeading'); for(let i=0; i<accordionHeadings.length; i++){ accordionHeadings[i].addEventListener('click', toggle); } function toggle(event){ let accordionItem = event.target.parentElement.lastElementChild; if(accordionItem.classList.contains('close')){ accordionItem.classList.remove('close'); accordionItem.classList.add('open'); }else{ accordionItem.classList.remove('open'); accordionItem.classList.add('close'); } }

 .accordionContent{ padding: 2em; margin: 0.5em; background-color: lightgrey; }.open{ display: block; }.close{ display: none; }

 <div class="accordionContent"> <div class="accordionHeading"> Click me to toggle the content </div> <div class="accordionItem close"> CONTENT </div> </div> <div class="accordionContent"> <div class="accordionHeading"> Click me to toggle the content </div> <div class="accordionItem close"> CONTENT </div> </div>