Estoy tratando de configurar un portafolio para un sitio web de fotografía y cuando obtengo fotos agrego múltiples a la vez, ¿hay alguna manera de usar JavaScript para automatizar el proceso de creación de una etiqueta tantas veces como sea necesario con el conteo de enlaces? arriba.

Traté de buscar en otros lugares y nada apareció realmente.

<div class="container" id="Gallery">
        <figure class="gallery__item gallery__item--1"><img src="./img/image1.jpg" alt="image1" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--2"><img src="./img/image2.jpg" alt="image2" class="gallery__img"></figure>
        <figure class="gallery__item gallery__item--3"><img src="./img/image3.jpg" alt="image3" class="gallery__img"></figure>
</div>
function addElement() {
            var figure = document.createElement("figure");
            document.getElementById('Gallery').appendChild(figure);
            figure.className += 'gallery__item';

            var photo = document.createElement("img");
            document.getElementById('gallery__item').appendChild(photo);
            photo.className += 'gallery__img';
        }

Me gustaría obtener javascript para recrear estas líneas de código en una cantidad determinada de veces, digamos que si hay 10 archivos en una carpeta, el código recreará esta línea diez veces. Así como el src de la imagen cuenta, por ejemplo, "image1.jpg, image2.jpg, image3.jpg, ...."

0
Changi.pro 17 oct. 2019 a las 12:59

5 respuestas

La mejor respuesta

Use data-attr para pasar dichos valores.

function solution() {
  const _listElNodeList = document.querySelectorAll('.container');
  _listElNodeList.forEach((_listEl) => {
    const count = _listEl.dataset.count;
    for (let i = 1; i <= count; i++) {
      const figure = document.createElement('figure');
      figure.classList.add('gallery__item');
      figure.classList.add('gallery__item--' + i);
      const img = document.createElement('img');
      img.classList.add('gallery__img');
      img.src = "./img/image" + i + ".jpg";
      img.alt = 'image' + i;
      figure.appendChild(img);
      _listEl.appendChild(figure);
    }

  });
}

solution();
<div class="container" id="Gallery" data-count="10"></div>
1
Sumit Ridhal 17 oct. 2019 a las 10:31

Puede usar literales de plantilla para crear el html dentro de <div class="container" id="Gallery"> y agregarlo en un bucle.

Si tiene las imágenes dentro de una matriz, repítalas y agréguelas a su div.

const div = document.getElementbyId('Gallery');

for (i = 0; i < pictures.length; i++) {
  div.innerHTML += `<figure class="gallery__item gallery__item--${i}"><img src="${picture[i]}" alt="image${i}" class="gallery__img"></figure> `
}

O algo similar, pero busca literales de plantilla.

0
Sergiu Elmi 17 oct. 2019 a las 10:32

Suponiendo que puede usar la sintaxis de ES6, esta solución no requiere una cantidad fija de archivos. La línea clave es: photos.forEach(x => addElement(x));. Agregué la clase GalleryPhotoFiles con una aplicación de ejemplo para contexto adicional.

Considere pasar la información de su foto a addElement(), como parámetro. Esto lo hará más extensible, para uso futuro.

class GalleryPhotoFiles {
    constructor(imageSource, alt, etc) {
        this.imageSource = imageSource;
        this.alt = alt;
        this.etc = etc;
    }

    imageSource = '';
    alt = '';
    etc = '';
}

const photo1 = new GalleryPhotoFiles('./img/image1.jpg', 'image1', 'etc'),
    photo2 = new GalleryPhotoFiles('./img/image2.jpg', 'image2', 'etcc'),
    photo3 = new GalleryPhotoFiles('./img/image3.jpg', 'image3', 'etccc');

// Assuming you have an array of files (I'm calling them photos)
const photos = [photo1, photo2, photo3];

// apply your function to each file
photos.forEach(x => addElement(x));

function addElement(galleryFile: GalleryPhotoFiles) {

    const figure = document.createElement('figure');
    document.getElementById('Gallery').appendChild(figure);

    // You might want to add info from the photo objects
    figure.className += `gallery__item_${galleryFile.alt}`;

    const photo = document.createElement('img');
    document.getElementById('gallery__item').appendChild(photo);
    photo.className += `gallery__img__${galleryFile.etc}`;
    photo.src = galleryFile.imageSource;
}
0
Remy 17 oct. 2019 a las 11:12

Creo que es capaz de hacer esto.

var currentImageIndex = 0;
function addElement() {
    currentImageIndex ++;
    ...
    photo.src = 'gallery__img';
}

Eso es todo.

0
STAR-SSS 17 oct. 2019 a las 10:24

Supongamos que no desea utilizar ningún marco práctico para ayudarlo a lograr esto, su código podría tener el siguiente aspecto:

<html>
<head>
</head>
<body>
  <div class="container" id="Gallery">
  </div>
  
  <script>

	function buildImages() {
  
		var NUMBER_OF_IMAGES = 10;
		var gallary = document.getElementById('Gallery')

		for (var currentImageNumber=1; currentImageNumber <=10; currentImageNumber++) {
			var figure = document.createElement("figure");
			var photo = document.createElement("img");
	  
			var currentImageName = "image" + currentImageNumber.toString();
	  
			figure.className = 'gallery__item';
			photo.className = 'gallery__img';
			photo.src = "./img/" + currentImageName + ".img";
			photo.alt = currentImageName;
			figure.appendChild(photo);

			gallary.appendChild(figure);
		}
	}

	buildImages();
</script>
</body>
</html>

Observe que la función aparece al final de la etiqueta del cuerpo para que se cargue todo el DOM antes de que se ejecute de manera importante para que var gallary = document.getElementById('Gallery') funcione correctamente explicación

0
amos guata 17 oct. 2019 a las 10:40