Weisen Sie jedem Bild über „img“ forEach zu.

Question

Ich versuche, forEach in JS unter dem img-Tag in HTML zu verwenden.

Dies ist die Variable bobbingPhotos:

bobbingPhotos.forEach(function(photo) {
  var randomDelay = Math.random() * 2; // Zufällige Verzögerung zwischen 0 und 2 Sekunden
  photo.style.animationDelay = randomDelay + 's';
});

Dieses Problem könnte gelöst werden, indem jedem Bild ein fest codierter Klassenname „bobbing-photo“ zugewiesen wird. Dies ist jedoch nicht möglich, da meine Bilder aus Texteingaben generiert werden.

function genericImages() {
  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';
}
anders {
  var image = document.createElement('img');
  image.src = 'FONT/' + Zeichen + '.png';
  Element = Bild;
  image.classList.add("bobbing-photo");
}

Selbst mit image.classList.add("bobbing-photo") gibt es keine Möglichkeit, jedes Bild zu unterschiedlichen Zeitpunkten auf und ab schweben zu lassen.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

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