Javascriptクラスボタンにクラス機能を割り当てます。

Question

私はJavaScriptクラス（ES6）を持っていますが、クラスによって作成されたボタンにそのクラスの関数を割り当てようとしています。このクラスでもあるクラスがtabDrawers本体にあるボタンを作成し、私は、関数openTab（インデックス）を割り当てる（addTab（）に見られるように）タブが追加されます私のメインクラス

class tabDrawer { 
constructor(bodyID) { 
    this.bodyID = bodyID; 
    this.tabArray = []; 
    this.initialized = false; 
} 

get getBodyID() { 
    return this.bodyID; 
} 

initialize() { 
    this.body = document.getElementById(this.bodyID); 
    var baseHTML = "<div id='tabDiv'><div class='tab'></div><div class='tabContentDiv'></div></div>"; 
    this.body.innerHTML = baseHTML; 
    this.initialized = true; 
} 

addTab(tab) { 
    if(this.initialized) { 
     var tabClass = "tabLinks"; 
     if(this.tabArray.length === 0) { 
      tabClass += " active"; 
     } 
     console.log(this.tabArray.length); 
     this.body.children[0].children[0].innerHTML += "<button class='" + tabClass + "' id='btn" + tab.name + "'>" + tab.tabTitle + "</button>"; 
     this.body.children[0].children[1].innerHTML += "<div style='display: none' id='" + tab.name + "' class='tabContent'>" + tab.content + "</div>" 

     var tabButton = document.getElementById("btn" + tab.name); 
     tabButton.addEventListener("click", evt => this.openTab(evt)); 

     this.tabArray[this.tabArray.length] = tab; 
    } 
} 

openTab(index) { 
    var tabByIndex = this.tabArray[index]; 

    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabContent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Get all elements with class="tablinks" and remove the class "active" 
    tablinks = document.getElementsByClassName("tabLinks"); 
    for (i = 0; i < tablinks.length; i++) { 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
    } 

    // Show the current tab, and add an "active" class to the button that opened the tab 
    document.getElementById(tabByIndex.name).style.display = "block"; 
    document.getElementById("btn" + tabByIndex.name).className += " active"; 
} 
} 

。私はクラスの代わりにボタンを参照するので、単に "this.openTab"とイベントリスナーを追加することはできません知っている。

行番号tabButton.addEventListener("click", evt => this.openTab(evt));が機能しているようですが、インデックスパラメータを関数に渡す方法がわかりません。この関数は、エンドユーザーもこの機能を利用できるようにするために、tabs.openTab(0);の "tabs "はtabDrawerのインスタンスです。

これはできますか？もしそうなら、どうしたらいいですか？

Answer 1

Document.createElement()を使用してHTML要素（innerHTMLではなく）を作成し、次に作成した要素にeventsを割り当てる必要があります。このような単純な：

var myClickMeFunction = function() { 
 
    alert('you clicked myClickMeFunction'); 
 
}; 
 

 
var button = document.createElement('button'); 
 
    button.classList.add('xxx'); 
 
    button.textContent = 'Click me'; 
 
    
 
    button.addEventListener('click', myClickMeFunction); 
 
    
 
document.body.appendChild(button);

.xxx { 
 
    background-color: orange; 
 
}

Answer 2

インデックスを渡すために、あなたはあなたのイベントにthis.tabArray.length代わりのevtを使用する必要があります。問題は、別のタブを追加する際に長さが変わるということですので、あなたは、スコープそれに必要があります。

var self = this; 
var handler = function (index){ 
    return function(){ 
     self.openTab(index); 
    } 
} 
tabButton.addEventListener("click",handler(this.tabArray.length)); 

これは、パラメータのインデックスを使用してイベントハンドラを作成するには、ハンドラ関数を実行します。

あなたは単純な厳しいやり方をすることができます...インデックスを必要とする唯一の理由は、tabArrayからタブをつかむことです！単にタブを直接渡すのではないのですか？