Berikan untukSetiap pada setiap imej melalui 'img'

Question

Saya cuba menggunakan forEach dalam JS di bawah teg img dalam HTML.

Ini ialah pembolehubah bobbingPhotos:

bobbingPhotos.forEach(function(photo) {
  var randomDelay = Math.random() * 2; // Kelewatan rawak antara 0 dan 2 saat
  photo.style.animationDelay = randomDelay + 's';
});

Masalah ini boleh diselesaikan dengan memberikan setiap imej nama kelas berkod keras "bobbing-photo", tetapi saya tidak boleh melakukan ini kerana imej saya dihasilkan daripada input teks.

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

  untuk (var i = 0; i < userInput.length; i++) {
    aksara var = userInput[i].toUpperCase();
    elemen var;

    jika (watak === "n") {
  elemen = document.createElement('br');
}
else if (watak === ' ') {
  elemen = document.createElement('img');
  element.src = 'FONT/SPACE.png';
}
lain {
  imej var = document.createElement('img');
  image.src = 'FONT/' + aksara + '.png';
  unsur = imej;
  image.classList.add("bobbing-photo");
}

Walaupun menggunakan image.classList.add("bobbing-photo"), tiada cara untuk membuat setiap imej terapung ke atas dan ke bawah pada titik masa yang berbeza.

Adakah terdapat cara untuk menyelesaikan masalah ini?

Answer 1

Memandangkan anda menambah tag imej secara dinamik, fungsi animasi harus dipanggil semula selepas menambah tag imej.

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