获取整数变量的值以进行动态加载

Question

我正在尝试动态创建元素并向它们添加事件侦听器。这是一些代码：

var marks = {
  list:[{
    selected: "content",
    url: "http://youtube.com/feed/subscriptions",
    trait: "id"
  },{
    selected: "js-streams streams items",
    url: "http://twitch.tv/directory/following",
    trait: "class"
  }]
};

var l = marks.list.length;

var web = "<webview src='https://youtube.com/feed/subscriptions' preload='preload.js' disablewebsecurity></webview>";    

for(var i = 0; i < l; i++){
  var webadd = "<webview id=web" + i + " src=" + marks.list[i].url + " preload='preload.js' disablewebsecurity></webview>";
  $('#canvas1').append(webadd);

  document.getElementById("web" + (i)).addEventListener("dom-ready", function() {
        console.log("nice" + (i)); // <-- This line most likely needs changing
  });
}

现在，我可以在每个元素上获取我的元素和一个事件侦听器，但是当涉及到控制台日志时，它会打印 "nice2" 两次。有没有办法让该行将 var i 的值作为整数而不是 i 本身？理想情况下，我希望它打印出 nice0 和 nice1。有任何想法吗？谢谢。

Answer 1

您需要一个额外的函数来创建您的事件侦听器并将当前 i 绑定到它：

document.getElementById("web" + (i)).addEventListener("dom-ready", (function(n) { 
    return function() {
        console.log("nice" + (n));
    }
})(i));

Answer 2

你最好使用 forEach 循环。这样您就可以关闭并保持上下文。也更好读。

 mark.list.forEach(function(item, i){
   var webadd = "<webview id=web" + i + " src=" + item.url + " preload='preload.js' disablewebsecurity></webview>";
   $('#canvas1').append(webadd);

  document.getElementById("web" + i).addEventListener("dom-ready", function() {
        console.log("nice" + i); // <-- 
  });
})

获取整数变量的值以进行动态加载

Get value of integer variable for dynamic loading

javascript

webview

electron