Question

所以我有一个问题。因此，我想遍历SVG对象数组并将事件侦听器添加到每个对象。

我的问题是，当我尝试使用此行执行此操作时：

alert(myRects[i].id + ' success! '+ i);

我收到一条错误消息，说id未定义...

然后在此行中尝试使用...（下面的代码中的那个）：

 alert(rectInstance.id + ' success! '+ i);

...似乎每个对象都具有与数组中的最后一个对象相同的事件侦听器。如果我的想法完全不对，或者我在滥用某些东西，就可以知道...

一如既往，我们非常感谢您的帮助

var myRects;
var rectInstance;

// event listener to make sure the page has loaded before running the scrupt
window.addEventListener("load", function() {
// gets an SVG object from the inline HTML
var svgObject = document.getElementById('rectTestSvg').contentDocument;


myRects = Array.from(svgObject.querySelectorAll("rect"));



// loop through the rects array
for(var i = 0; i < myRects.length; i++)
{
    // copy myRects array to a temporary object
    var rectInstance = myRects[i];
    //add an on click event listener to each object in the rects array
     rectInstance.addEventListener('click', function(){
        //pop up that proves each rect got a unique on click event
        alert(rectInstance.id + ' success! '+ i);

    })
    // add object now with eventlistener back to myRects array
    myRects[i] = rectInstance;

  }


});

Answer 1

要解决范围问题，您有2种解决方法

如果使用ES6，请将var替换为let。

否则，将回调包含在IIFE中，这将创建一个新的函数作用域。

rectInstance.addEventListener('click', (function(newI) {
    return function() {
       //pop up that proves each rect got a unique on click event
       alert(rectInstance.id + ' success! ' + newI);
    }
})(i));

将eventListener添加到Javascript对象数组中的每个元素

1 个答案: