如何使用 JavaScript 创建函数和图像标签一遍又一遍地重复?

>我正在尝试为摄影网站设置一个投资组合，当我获得照片时，我一次添加多个照片，有没有办法使用 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、....">

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

我认为它能够做到这一点。

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

就是这样。

您可以使用模板文本在<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> `
}

或类似的东西，但搜索模板文字。

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

<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')正常工作说明

假设您可以使用 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;
}

相关内容

最新更新

热门标签：