如何使用纯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上下文将是被单击的元素，而不是您的Accordion实例。 有几种解决方法。 您可以设置另一个变量，在点击处理程序之外将self等this变量，然后在点击处理程序this.sections self.sections更改为self.sections （以及您需要的任何其他实例变量）。 但是，我的首选方法是将其bind到您的点击处理程序： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
3. 如果您决定采用bind ，则必须更新this.nextElementSibling引用，因为this上下文不再是clicked元素。 您可以通过在点击处理程序中添加event参数并引用event.target而不是this来获得clicked元素。