将 onclick 事件添加到 javascript 中新创建的表头，但 onclick 函数被添加到页面上的所有内容中，而不仅仅是我想要的那个

Question

我在js中生成一个表，并使用如下函数的一些标题:

function generateTableHeader(table) {
    var tr = document.createElement('tr');
    var th = document.createElement('th');
    th.onclick = function(){
        toggleHidden("hide_header_" + table_count);
    };
    th.appendChild(document.createTextNode(key));
    tr.appendChild(th);    

    table.appendChild(tr);
}

我的toggle hidden函数只是隐藏类"hide_header_{some number}"的所有元素。

问题是，我调用这个generateTableHeader函数几次，为多个表创建头-每次它被称为table_count(全局变量)是递增的，我希望这个函数只隐藏元素的类，当它有onclick事件创建时的数字。相反，每当我单击任何标题时，它们总是隐藏最后创建的元素。

该函数被调用4次以在4个不同的表中创建4个表头-每个表都有一列td，其中包含正确的类名(即。"hide_header_1"， "hide_header_2"等等)。当我单击第一个标题时，第四个表列被隐藏/显示。当我单击第二列、第三列或第四列时，仍然只有第四列被隐藏/显示。我希望每次单击只隐藏该表中的td。

就好像我每次调用这个函数时创建的onclick事件都被覆盖，不知道为什么。什么好主意吗?

任何帮助将不胜感激!

Answer 1

这是一个闭包问题，您在所有单击处理程序中使用相同的变量。相反，您可以在设置click事件时使用带有全局变量值的局部变量。

function generateTableHeader(table) {
    var tr = document.createElement('tr');
    var th = document.createElement('th');
    var local_table_count = table_count;
    th.onclick = function(){
        toggleHidden("hide_header_" + local_table_count);
    };
    th.appendChild(document.createTextNode(key));
    tr.appendChild(th);    

    table.appendChild(tr);
}

Answer 2

我想答案可能就在你自己的描述中。table_count是一个全局变量。每次增加它时，所有事件侦听器在

行中使用的引用:

th.onclick = function(){
    toggleHidden("hide_header_" + table_count);
};