如何构建一个数字一个数字的元素

Question

我正在制作画廊。所有图像均命名为1.JPG，2.JPG，3.JPG等 - 它一直延伸至200.jpg。

复制和粘贴会没关系，但是很耗时。

  <div class="slideshow-container">
          <div class="slideshowDisplay fade">
            <img src="/images/media/1.jpg" width="100%">
          </div>
          <div class="slideshowDisplay fade">
            <img src="/images/media/2.jpg" width="100%">
          </div>
          <div class="slideshowDisplay fade">
            <img src="/images/media/3.jpg" width="100%">
          </div>

我可以使用循环或类似的方法来为我创建所有元素吗？我唯一的问题是，循环被用来多次重复代码块，因此对我来说这是行不通的。

有其他方法可以创建元素而不必花很长时间简单地手工增加数字吗？

到目前为止，我有：

for(var i=0; i < 200; i++){
   var newDiv = document.createElement('div');
   newDiv.className = 'slideshowDisplay fade';
}

别无其他...

任何指导都非常感谢。

Answer 1

基本的DOM创建和附加

您只是缺少将新元素附加到slideshow-container并添加其内容。您可以使用i变量创建增量图像src。

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = sc.appendChild(document.createElement('div'));
   newDiv.className = 'slideshowDisplay fade';
   var img = newDiv.appendChild(document.createElement("img"));
   img.width="100%";
   img.src = "/images/media/" + (i + 1) + ".jpg";
}

---

字符串串联

创建src的手段称为"字符串串联"。换句话说，我们从多个部分创建一个新字符串。首先是"/images/media/"字符串，然后是i的值，但进行了调整，最后是".jpg"部分。

---

制作助手功能

fwiw，很高兴拥有一个个人微型图书馆来处理某些重复任务。其中一种包含可以是创建新元素的功能。

function create(elem, props, par) {
  var el = document.createElement(elem)
  for (var p in props) {
    el[p] = props[p]
  }
  return par ? par.appendChild(el) : el
}

这需要一些冗长的创建和附加新元素的冗长。

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   var newDiv = create("div", {className: "slideshowDisplay fade"}, sc);
   create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"}, newDiv);
}

---

辅助功能的不同方法

或不让函数接收到所附加的父母，您可以允许其接收任意数量的子元素。

function create(elem, props, ...children) {
  var el = document.createElement(elem)
  for (var p in props) {
    el[p] = props[p]
  }
  children.forEach(ch => el.appendChild(ch))
  return el
}

然后，您可以以镜像新的DOM结构的方式将调用嵌套到create。

var sc = document.querySelector(".slideshow-container")
for(var i=0; i < 200; i++){
   sc.appendChild(
     create("div", {className: "slideshowDisplay fade"}, 
       create("img", {width: "100%", src: "/images/media/"+(i+1)+".jpg"})
     )
   );
}

Answer 2

实际上您只需要一个父级div。然后，只需使用document.createElement和appendChild之类的函数存储新创建的DIVS，并在父元素内使用图片。

var source = "/images/media/";
var parent = document.getElementById('parent');
for (var i = 0; i < 10; i++) {
  var newDiv = document.createElement('div');
  newDiv.className = 'slideshowDisplay fade';
  var img = document.createElement('img');
  img.src = source + i + '.jpg';
  img.width = '100%';
  newDiv.appendChild(img);
  parent.appendChild(newDiv);
}

<div class="slideshow-container" id='parent'>
</div>