將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';
    });