Question

我正在尝试创建多个div，每个div都有一个img。

我的JS目前看起来像这样：

＆＃13;

for (x = 0; x < 10; x++) {

  // img string
  var string = 'http://cdn.iammatthias.com/gal/mobile/mobile-9.jpg';

  // Create frame
  var gal = document.createElement('div');
  gal.id = "frame";
  document.getElementById('gal').appendChild(gal);


  document.getElementById("frame").style.background = "url('" + string + "') no-repeat center";
  document.getElementById("frame").style.backgroundBlendMode = "multiply";
		document.getElementById("frame").style.backgroundSize = "cover";

  // Create main
  var main = document.createElement('img');
  main.id = "main";
  document.getElementById('frame').appendChild(main);

  document.getElementById("main").src = string;
}

＆＃13;

这给了我10个id = frame的div，但是它在第一个id = frame div中堆叠了所有img。

我在这里有一个JS小提琴：https://jsfiddle.net/matthiaskjordan/yap7w1vn/

我能够让它与EJS一起工作，但我希望有一个纯粹的JS实现。但这就是我希望这样做的结果：http://imgframe.surge.sh/harp-ejs

以下是我的EJS代码：

＆＃13;

<% var keys = new Array(10)
    .join().split(',')
    .map(function(item, index){ return ++index;});
    for (var i=0; i<keys.length;i++) { %>
      <div id="frame" style="background: url(http://cdn.iammatthias.com/gal/mobile/mobile-<%= [keys[i]] %>.jpg); background-repeat: none; background-position: center; background-blend-mode: color-dodge;" >
       <img class="main" src="http://cdn.iammatthias.com/gal/mobile/mobile-<%= keys[i] %>.jpg" />
      </div>
<% } %>

＆＃13;

任何帮助将不胜感激！

使用JS创建具有动态内容的多个div

0 个答案: