javascript - 所有点击功能都存储了相同的对象 - 关闭问题？

Question

我有一个包含多个 Google 图表的网页。

在每个图表下方，我想添加一个按钮：

单击按钮时，应在其下方显示或隐藏具有相同数据的表格。

显示图表、按钮、表格对我来说很好。

他们有 ids: ..._chart, ..._button, ..._table.

然而，让点击处理程序来切换表格不起作用，并且console.log下面的代码中总是打印相同的 id字符串。

我怀疑这是一个函数关闭问题，但我不确定如何解决它。

这是我的错误代码：

function drawCharts() {
        for (var csv in data) {
                ......skipped some code...

                var chart = new google.visualization.LineChart(document.getElementById(csv + '_chart'));
                chart.draw(t, options);

                var table = new google.visualization.Table(document.getElementById(csv + '_table'));
                table.draw(t, options);

                $('#' + csv + '_table').hide();

                $('#' + csv + '_button').click(function() {
                        console.log('#' + csv + '_table'); // ALWAYS PRINTS SAME
                        $('#' + csv + '_table').toggle();
                });
        }
}

$(function() {
        google.setOnLoadCallback(drawCharts);
});

请问有什么帮助吗？

Answer 1

将您的点击处理程序设置包装在一个闭包中

(function(csv){
    $('#' + csv + '_button').click(function(x) {
        console.log('#' + csv + '_table'); 
        $('#' + csv + '_table').toggle();
    });
})(csv);