javascript:2切换由于相同的类名而不能在同一个页面上工作

Question

我是JS的新手，我遇到了一个问题，我在同一个页面上添加了两个相同的sitecore模块，该模块有两个切换类名的相同脚本。

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';
}
}

问题是，由于类名相同，只有一次模块单击可以工作。现在我如何使用"；这个"；为了解决我的问题，两个模块应该工作，尽管有相同的类名？

编辑：HTML代码：

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

Answer 1

我没能让你的HTML正常工作，但我会在toggleItem函数中尝试的方法如下：

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参数添加到函数切换中。这使得我们可以追溯触发点击事件的目标(accordionHeading(，例如，从那里我们可以获得父对象(accordion容器(，然后从那里我们就可以回去找到这个容器中的实际元素accordionItem。

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>