Question

我有一些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对象，因为此代码与使用图表对象的脚本相同。
但由于同一页面上有多个图表，所有图表的脚本都有图表对象，因此多次加载此脚本。
现在我的问题：
每当上面代码中的事件发生时，它都不知道要处理chart的{{1}}对象，因此它会在随机图表对象上调用addTrendLine。
有意义吗？

我如何管理事情，使每个事件处理程序只处理相关图表addTrendLine/removeTrendLine上的事件任何人都可以提前帮助。

Answer 1

每当上述代码中的事件发生时，它都不知道要处理addTrendLine的图表对象，因此它会在随机addTrendLine对象上调用removeTrendLine / chart。有意义吗？

不，它没有。假设这个代码是如图所示加载的（不在另一个函数中），事件将始终使用加载的 last 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。

javascript中的对象歧义

1 个答案: