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

Question

我正在 js 中生成一个表，并对某些 header 使用如下函数:

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

我的切换隐藏函数只是隐藏“hide_header_{some number}”类的所有元素。效果很好。

问题是，我多次调用此generateTableHeader函数，为多个表创建 header - 每次调用它时table_count(全局变量)都会递增，并且我期望此函数仅隐藏具有其编号的元素类onclick 事件被创建。相反，每当我单击任何标题时，它们总是隐藏最后创建的元素。

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

就好像我正在创建的 th onclick 事件在每次调用此函数时都被覆盖，不知道为什么。有什么想法吗？

如有任何帮助，我们将不胜感激!

Answer 1

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

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