javascript - 如何构建动态地将数字加一的元素？

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 循环或类似的方法来为我创建所有元素吗？我唯一的问题是，for 循环用于多次重复代码块，不是吗，所以这对我来说不起作用。

是否有另一种方法可以让我创建元素而不必花费很长时间手动递增数字？

到目前为止我已经:

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 的值，但向上调整了 1，最后是 ".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
}

然后您可以以反射(reflect)新 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"})
     )
   );
}