如何動態創建和修改多個 SVG

Question

我正在動態添加多個 SVG，然后修改它們中的每一個。 如果沒有事件偵聽器，則看不到地圖。 但是，現在，事件偵聽器似乎創建了最后一個循環的多個實例，而不是每個循環一個，只有最后一個實例被修改，但多次使用相同的mygroup,svgID 。

for (var i=0; i<path.length; i++) {
    var mygroup = path[i], svgID = "svgMap" + i
    const iSVG = document.createElement("object")
    document.getElementById("summary-mygroup").appendChild(iSVG)
    iSVG.id = svgID
    iSVG.type = "image/svg+xml"
    iSVG.data = "Maps/mygroup_basemap.svg"
    iSVG.addEventListener('load', function(){
        createMap(mygroup,svgID)
    })
}

Answer 1

TL;博士：

使用const代替var

const mygroup = path[i], divID = "div" + i, svgID = "svgMap" + i

---

您所看到的是由於function()使用mygroup 、 divID和svgID形成了循環的范圍，該范圍不斷更新，直到函數執行（全部具有最新值）。 發生這種情況是因為使用了相同的變量。

var和const / let的行為不同

var作用於函數，而let / const作用於塊。 （ var也被提升，但這與問題的關系不大）

所以如果你運行：

for (var i=0; i < 3; i++){
    var b = i
  setTimeout(function(){console.log(b)},1)// 😡 2,2,2
}
console.log("B:", b) // 😬 2

您不會期望console.log("B:", b)運行時沒有錯誤，但確實如此，因為 var 的范圍存在於函數之外。

而如果你使用let或const

for (var i=0; i < 3; i++){
  let b = i;
  setTimeout(function(){console.log(b)},1)// 👍 0,1,2
}
console.log("B:", b)  // 👍 throws error

您將有預期的行為，包括 console.log 上的錯誤

而且因為這是一個函數與塊范圍的問題，你可以將整個功能移動到一個函數中並調用它，這將鎖定函數的范圍：

for (var i=0; i < 3; i++){
  (function(){
    var b = i
    setTimeout(function(){console.log(b)},1)// 👍 0,1,2
  })()
}