如何使用純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元素。