表中的事件监听器每一行只触发最后一行

Question

我正在编写一个表格，允许用户单击表格行并显示隐藏的行。 我使用带有循环的 addEventListener 来允许每个表行调用该行下的隐藏行。 例如：

row A 
row B

点击A行后，隐藏行将显示在A行下方和B行上方

row A
hidden row 1
hidden row 2
row B

但是，我的代码将始终且仅触发最后一行。如果表格中有 15 行，则可以单击并显示行。只有第 15 行的隐藏行会显示。无论我点击第 1 行还是第 15 行，网页总是显示第 15 行。

                        var id = "";
                        var count = 1;
                        var table = document.getElementById("header_table");
                        for (var i = 0; i < r.length - 1; i++) {
                            id = 'detail_' + i;
                            console.log(id);
                            table.rows[count].addEventListener('click', function () {
                                console.log("clicking row " + i);
                                $("." + id).toggle();
                            });
                            count = count + 6;
                        }

Answer 1

谢谢大家，我解决了我的问题。我应该将参数绑定到函数中。

Reference: Function.prototype.bind