如何定位三个具有相同功能的 ID？

Question

我正在尝试将相同的功能应用于三个不同的 ID。我创建了一个 fiddle 来说明这一点：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();

所以我正在尝试以与红色数字相同的方式为黑色数字设置动画。有什么想法吗？

谢谢！

Answer 1

第 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;
   });
}

在你的fiddle中：https://jsfiddle.net/ku72qy7e/

如何定位三个具有相同功能的 ID？

How can I target three IDs with the same function?

javascript

gsap