我有一些javascript在一个页面中多次加载
var chart = new AmCharts.AmSerialChart();
...more with chart object...
$( "#chartdiv${divId}" ).closest('#mainBox').find('#toggleTrendline').on('click',
function() {
if(chart.trendLines==""){
chart.addTrendLine(trendLine)
}else{
chart.removeTrendLine(trendLine)
}
chart.validateNow()
});
在上面的代码中,它可以访问chart
对象,因为此代码与使用图表对象的脚本相同
但由于同一页上有多个图表,因此此脚本被多次加载,并且所有图表的脚本都将具有图表对象
现在我的问题是:
每当上面代码中的事件发生时,它都不知道要处理addTrendLine
的chart
对象,所以它在随机图表对象上调用addTrendLine/removeTrendLine
有道理吗?
我如何管理事情,使每个事件处理程序只处理相关图表object
上的事件
任何人都可以帮忙,提前谢谢。
每当上面代码中的事件发生时,它都不知道要处理哪个图表对象
addTrendLine
,所以它在随机chart
对象上调用addTrendLine
/removeTrendLine
。有道理吗?
不,不是。假设如图所示加载此代码(不在另一个函数中),则事件将始终使用最后加载的chart
对象,因为chart
是每次加载代码时覆盖的全局变量。
我如何管理事情,使每个事件处理程序只处理相关图表对象上的事件。
通过将该代码放入作用域函数中,并让处理程序关闭自己的chart
:副本
(function () {
var chart = new AmCharts.AmSerialChart();
//...more with chart object...
$("#chartdiv${divId}")
.closest('#mainBox')
.find('#toggleTrendline')
.on('click',
function () {
if (chart.trendLines == "") {
chart.addTrendLine(trendLine)
} else {
chart.removeTrendLine(trendLine)
}
chart.validateNow()
}
);
})();
现在,chart
是事件处理程序关闭的作用域函数中的一个局部变量。每个单元都是独立的。
当然,我只想指出,您使用的元素具有id
s(如#mainBox
),并且id
s必须在页面上是唯一的,因此代码的多个加载之间会有交互。可能有一种更好的方法来构建它,但以上内容至少可以满足您的要求,每次重复代码时都会给您一个单独的chart
。