Question

我正在尝试为摄影网站建立投资组合，当我获取照片时，一次添加多张照片，有没有一种方法可以使用javascript来根据需要自动创建标签的过程链接计数。

我尝试去其他地方看，什么都没有出现。

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

我想获取javascript以一定次数重新创建这些代码行，例如，如果文件夹中有10个文件，则该代码将重新创建该行十次。图像的src也会计数，例如“ image1.jpg，image2.jpg，image3.jpg，....”

Answer 1

使用data-attr传递此类值。

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>

Answer 2

您可以使用模板文字在<div class="container" id="Gallery">内创建html并将其附加到循环中。

如果图片在数组中，则循环然后将其添加到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> `
}

或类似的内容，但搜索模板文字。

Answer 3

我认为它能够做到。

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

就是这样。

Answer 4

假设您不想使用任何方便的框架来帮助您实现这一目标，您的代码可能如下所示：

<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>

请注意，该函数出现在body标签的末尾，以便所有DOM在其运行之前都将被加载，从而使var gallary = document.getElementById('Gallery')将正确运行explanation

Answer 5

假设您可以使用ES6语法，则此解决方案不需要固定数量的文件。关键行是：photos.forEach(x => addElement(x));。我添加了带有示例应用程序的GalleryPhotoFiles类，以获取其他上下文。

请考虑将您的照片信息作为参数传递给addElement()。这将使其更具扩展性，以备将来使用。

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

如何使用javascript反复创建函数和图像标签？

5 个答案: