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的方法称为＆＃34;字符串连接＆＃34;。换句话说，我们从多个部分创建一个新字符串。首先是"/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

实际上你的DOM中只需要一个父div。然后只需使用document.createElement和appendChild等函数将新创建的div与图片存储在父元素中。

＆＃13;

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

＆＃13;

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

＆＃13;

如何构建动态递增数字的元素？

2 个答案: