如何使用纯JavaScript使手风琴构造函数?

Question

我正在尝试用纯javaScript为手风琴制作一个构造函数，但它不起作用...我想这与"this"关键字行为不端有关。我已经用一个普通的函数编写了代码，它确实有效，但它不适用于下面的构造函数。

function Accordion(accordionId) {
this.container = document.getElementById(accordionId);
this.headers = this.container.getElementsByClassName("accordion-header");
this.sections = this.container.getElementsByClassName("accordion-section");
for (var i = 0; i < this.headers.length; i++) {
this.headers[i].addEventListener("click", this.toggleSections);
}
this.toggleSections = function() {
var toggeld = this.nextElementSibling.className;
for (var i = 0; i < this.sections.length; i++) {
this.sections[i].className = "accordion-section";
}
if (toggeld === "accordion-section") {
this.nextElementSibling.className = "accordion-section-displayed";
} else {
this.nextElementSibling.className = "accordion-section";
}
}
}
var newAccordion = new Accordion("accordion-wrapper");

<div id="accordion-wrapper">
<h3 class="accordion-header">First Section</h3>
<div class="accordion-section">
.
</div>
<h3 class="accordion-header">Second Section</h3>
<div class="accordion-section">
</div>
<h3 class="accordion-header">Third Section</h3>
<div class="accordion-section">
</div>
</div>

Answer 1

我在这里看到一些错误。

1. 您将单击处理程序设置为在定义this.toggleSections之前this.toggleSections。您应该在设置单击处理程序之前定义它。
2. 单击处理程序中的this上下文将是单击的元素，而不是可折叠实例。有几种方法可以解决这个问题。您可以在单击处理程序之外设置另一个变量，self等于this，并在单击处理程序(以及所需的任何其他实例变量)中将this.sections更改为self.sections。但是，我的首选方法是将其bind到您的点击处理程序：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
3. 如果您决定沿着bind大道走下去，则必须更新this.nextElementSibling引用，因为this上下文不再是单击的元素。您可以通过向单击处理程序添加event参数表来获取单击的元素，并引用event.target而不是this。