将forEach分配给每个图像通过'img'

Question

我正在尝试在HTML的img标签下使用JS中的forEach。

这是变量bobbingPhotos：

bobbingPhotos.forEach(function(photo) {
  var randomDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
  photo.style.animationDelay = randomDelay + 's';
});

这个问题可以通过给每个图像分配一个硬编码的类名"bobbing-photo"来解决，但是我不能这样做，因为我的图像是通过文本输入生成的。

function generateImages() {
  var userInput = document.getElementById('userInput').value;
  var imageOutput = document.getElementById('imageOutput');
  imageOutput.innerHTML = '';

  for (var i = 0; i < userInput.length; i++) {
    var character = userInput[i].toUpperCase();
    var element;

    if (character === "n") {
  element = document.createElement('br');
}
else if (character === ' ') {
  element = document.createElement('img');
  element.src = 'FONT/SPACE.png';
}
else {
  var image = document.createElement('img');
  image.src = 'FONT/' + character + '.png';
  element = image;
  image.classList.add("bobbing-photo");
}

即使使用image.classList.add("bobbing-photo")，也无法使每个图像在不同的时间点上下浮动。

有没有解决这个问题的方法？

Answer 1

由于您动态添加了图像标签，因此在添加图像标签后应再次调用动画函数。

generateImages();
    // todo here get elements by classname
    var bobbingPhotos = ...
    // call animation function again
    bobbingPhotos.forEach(function(photo) {
      var randomDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
      photo.style.animationDelay = randomDelay + 's';
    });