刪除svg線在JavaScript中的每次點擊新的最後一個節點

我目前正在開發一個離線應用程序，我使用Interactive svg。我的問題是刪除svg線最後一個點擊事件節點..案例是...它在（第一次點擊）工作，它刪除最後一個節點。但是當我再次嘗試。（第二次點擊）它不再工作。我似乎無法找到問題。刪除svg線在JavaScript中的每次點擊新的最後一個節點

這是我創造的SVG線段代碼..

var glblLineNode; 
var tempX=[], tempY=[], tempLine=[]; 

function drawRoad() 
{ 
     var path = glblGeogSorc.getElementsByTagName("path") 
     for (var loop=0; loop<Slct.length; loop++) 
     { 
     path[loop].addEventListener("mousedown", function(e) 
     { 
      if(e.button == 0 && glblenblroad === true) 
      { 

       var mousex = e.clientX - matrixE; 
       var mousey = e.clientY - matrixF; 

       tempX.push(mousex), tempY.push(mousey); 

       if(tempX.length > 1) 
       { 

        var road = document.createElementNS("http://www.w3.org/2000/svg", "line");       
         road.x1.baseVal.value = tempX[tempX.length -1]; 
         road.y1.baseVal.value = tempY[tempY.length -1]; 
         road.x2.baseVal.value = tempX[tempX.length -2]; 
         road.y2.baseVal.value = tempY[tempY.length -2]; 
         road.setAttributeNS(null, "stroke", "#686968"); 
         road.setAttributeNS(null, "stroke-width", "14.520"); 
         road.setAttributeNS(null, "stroke-linecap", "round"); 
         road.setAttributeNS(null, "fill", "none"); 
         glblGeogSorc.getElementsByTagName("g")[0].appendChild(road); 

         tempLine.push(road); 
         glblLineNode = road; 

       } 

      } 
     },false); 

    } 

}

讓我們姑且認爲功能drawRoad（）時被執行，那麼這裏是我從功能drawRoad刪除創建的SVG線的lastnode代碼（）

delLastNode.addEventListener("click", function() // delLastNode is a var for my button 
{ 

    glblGeogSorc.parentNode.removeChild(glblLineNode); //glblLineNode is global var prior to the line created 
    tempLine.pop();         //as well as tempLine[] 
    tempX.pop();          
    tempY.pop();          

},false);

它工作在首先單擊delLastNode（按鈕），但是當嘗試再次單擊它 ..我的目標是消除對，我想每一次每一個新的最後一個節點，它不工作了點擊delLastNod E（按鈕）。

來源

2012-09-09 Jason Borromeo Barba

glblLineNode正在每個循環上被覆蓋，所以它只保存對最後一個變量的引用（因爲循環結束）。當你刪除元素時，那個引用被破壞了，這就是它只能工作一次的原因。

你函數應該是這樣的：

delLastNode.addEventListener("click", function() // delLastNode is a var for my button 
{ 
    // .pop() returns the removed element, so let's store it. 
    var deleteElem = tempLine.pop(); 
    glblGeogSorc.parentNode.removeChild(deleteElem); 
    tempX.pop();          
    tempY.pop();          
},false);

無需全局變量。

來源

2012-09-09 20:44:29 Duopixel

現在它完美的工作.. :)感謝很多先生..我只需要將其存儲在本地變量..就是這樣.. .. –

刪除svg線在JavaScript中的每次點擊新的最後一個節點

回答

相關問題