Question

我有一个javascript类（ES6），我试图将该类中的函数分配给该类创建的按钮。这是我的主要课程

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";
}
}

当添加一个标签时（如addTab（）中所示），该类在tabDrawers主体中创建一个按钮，我想分配同样在该类中的函数openTab（index）。我知道我不能用＆＃34; this.openTab＆＃34;添加事件监听器。因为它将引用按钮而不是类。

行tabButton.addEventListener("click", evt => this.openTab(evt));似乎有效，但我不确定如何将index参数传递给函数，因为我希望函数仍然可供最终用户使用，因此他们可以这样做：tabs.openTab(0);使用＆＃34;标签＆＃34;是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中获取标签！为什么不直接通过标签？这样会更简单：

tabButton.addEventListener("click",()=>this.openTab(tab));

Javascript类将类功能分配给按钮

2 个答案: