複数の Google チャートを含む Web ページがあります。
各グラフの下にボタンを追加したいと思います。
ボタンをクリックすると、同じデータを含むテーブルがその下に表示または非表示になります。
チャート、ボタン、テーブルの表示はうまくいきます。
ID..._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);
});
何か助けてください。