如何使用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

*“，但是当我尝试使用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); 
    }; 
});

如何使用getElementByClassName而不是getElementById来复制元素？

相关推荐