純粋な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に変更するか、私の好ましい方法は、しかし、これではなく、あなたのクリックハンドラにbindにある：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
3. あなたがbind道を下ることに決めた場合thisコンテキストはもはやクリックした要素であるので、あなたはthis.nextElementSibling参照を更新する必要はありません。クリックハンドラにeventパラメータを追加し、thisの代わりにevent.targetを参照することで、クリックされた要素を取得できます。