如何定位具有相同功能的三个ID？(How can I target three IDs with the same function?)

如何定位具有相同功能的三个ID？(How can I target three IDs with the same function?)

我正在尝试将相同的功能应用于三个不同的ID。 我创建了一个小提琴来说明这一点： https ： //jsfiddle.net/jnoweb/xrpsshcp/

var game = {score:0}, scoreDisplay = document.getElementById("score1"); function add20() { TweenLite.to(game, 1, { score:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone }); } function updateHandler() { scoreDisplay.innerHTML = game.score; } add20();

所以我试图以与红色数字相同的方式为黑色数字设置动画。 有任何想法吗？

谢谢！

I'm trying to apply the same function to three different IDs. I've created a fiddle to illustrate this: https://jsfiddle.net/jnoweb/xrpsshcp/

var game = {score:0}, scoreDisplay = document.getElementById("score1"); function add20() { TweenLite.to(game, 1, { score:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone }); } function updateHandler() { scoreDisplay.innerHTML = game.score; } add20();

So I'm trying to animate the black numbers in the same way as the red number. Any ideas?

Thanks!

最满意答案

第1步 ：创建一个元素Array ，将其存储在scoreDisplay就像使用第一个元素一样。

scoreDisplay = [ document.getElementById("score1"), document.getElementById("score2"), document.getElementById("score3") ];

步骤2 ：使用Array.prototype.forEach为每个元素执行更新功能：

function updateHandler() { scoreDisplay.forEach(function(display) { display.innerHTML = game.score; }); }

在你的小提琴： https ： //jsfiddle.net/ku72qy7e/

Step 1: Make an Array of elements, store it in scoreDisplay like you did with the first element.

scoreDisplay = [ document.getElementById("score1"), document.getElementById("score2"), document.getElementById("score3") ];

Step 2: perform your update function for each element, by using Array.prototype.forEach:

function updateHandler() { scoreDisplay.forEach(function(display) { display.innerHTML = game.score; }); }

In your fiddle: https://jsfiddle.net/ku72qy7e/