如何使用getElementByClassName而不是getElementById來複制元素？

下午好，如何使用getElementByClassName而不是getElementById來複制元素？

我在我的頁面上使用2個svg計數器時遇到了麻煩。據我所知，我可以每頁只能使用一次Id，但是當我嘗試使用getElementByClassName而不是getElementById時，什麼都不起作用。如何在不使用getElementByClassName的情況下複製我的計數器或使代碼適用於它？

這裏是我的javascript的一部分：

var canvasSize = 200, 
centre = canvasSize/2, 
radius = canvasSize*0.8/2, 
s = Snap('#svg'), 
path = "", 
arc = s.path(path),  
startY = centre-radius, 
runBtn = document.getElementById('run'), 
percDiv = document.getElementById('percent'), 
input = document.getElementById('input'); 

input.onkeyup = function(evt) { 
if(isNaN(input.value)) { 
    input.value = ''; 
} 
}; 

runBtn.onclick = function() { 
run(input.value/100); 
}; 

function run(percent) { 
var endpoint = percent*360; 
Snap.animate(0, endpoint, function (val) { 
    arc.remove(); 

    var d = val, 
     dr = d-90; 
     radians = Math.PI*(dr)/180, 
     endx = centre - radius*Math.cos(radians), 
     endy = centre + radius * Math.sin(radians), 
     largeArc = d>180 ? 1 : 0; 
     path = "M"+centre+","+startY+" A"+radius+","+radius+" 0 "+largeArc+",0 "+endx+","+endy; 

    arc = s.path(path); 
    arc.attr({ 
     stroke: '#3da08d', 
     fill: 'none', 
     strokeWidth: 12 
    }); 
    percDiv.innerHTML = Math.round(val/360*100) +'%'; 

}, 2000, mina.easeinout); 
} 

run(input.value/100);

http://codepen.io/anon/pen/pyyNxO

來源

2016-03-09 Bastien Bastiens

*「，但是當我嘗試使用getElementByClassName而不是getElementById無效「*方法'getElementByClassName'不存在。我假設你的意思是'getElement' ** s **'ByClassName'。該文檔應提供足夠的信息供您學習如何使用它：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName。 –

告訴我們如何使用getElementsByClassName的代碼，並從那裏開始。你可能需要做所有事情，或者只能使用jQuery來處理元素數組。 –

正如Felix Kling指出的那樣，你想getElementsByClassName（複數元素小號），它會返回一個數組十歲上下節點列表是你可以使用[].method.call()和[].method.apply()的數組方法。

所以，我想通過id（也許「BTN1」和「BTN2」）中的對象保存輸入值和改變的onclick分配行是這樣的：

var runBtns = document.getElementsByClassName('btn'); 
[].forEach.call(runBtns, function (btn) { 
    btn.onclick = function() { 
    run(input.value[btn.id]/100); 
    }; 
});

來源

2016-03-09 02:16:35

如何使用getElementByClassName而不是getElementById來複制元素？

回答

相關問題