Question

我有一个这样的循环：

for (i = 0; i < number; i++) {
     // retrieve several pieces of information each time which will be result[0], result[1] etc.
     p = document.createElement('p')
     p.className = 'box'
     p.innerHTML = '<img src="http://website.com/1.png" width="80%" height="100%"</a>' + result[0] + '<h5> more html etc... </h5>'
     maintable.appendChild(p) 
}

我需要根据值i（website.com/1.png为i=0，website.com/2.png为i=1等）来更改图片，并在之后添加HTML其中包含循环提取的result[0]，result[1]等。

我尝试在图片中添加id，然后在循环结束时执行('#id').attr('src', 'http://website.com/' + (i + 1) + '.png')，但这并不是按预期工作的。我还尝试将p.append用于我需要添加的所有内容（而不是一个innerHTML），但这忽略了HTML，例如。 p.append("<h5>Object #1</h5>")会在页面上显示h5标记。

我已经查看了通过循环添加多个图像的答案，但是没有让它们在这种特定情况下工作。

如何做到最好？

Answer 1

我认为你的问题是（i + 1）。这会将您的表达式转换为整数。只使用我没有数学表达。我试过这个

p.innerHTML = '<img src="http://hippopool.com/media/'+i+'.jpg" width="600" height="100"><h5>more html etc</h5>';

不要忘记用分号终止你的javascript行。

Answer 2

您可以像下面一样创建图像并设置值

var imgurl = 'http://website.com/' + (i + 1) + '.png';
var img = $('<img id="dynamic">');
img.attr('src', imgurl);
img.appendTo('#imagediv');///append image to given element id
//here in this case it get append to div which is having id `imagediv`

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="totalDisplay">
</h4>
<div class="checkbox">
  <label><input type="checkbox" price-data="50.50" value="102">option1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" price-data="20" value="103">option2</label>
</div>

<button class="btn btn-default" id="submitData">Submit</button>

您无法指定段落元素图像属性，您必须创建图像元素。此代码在五个图像之间更改图像。

jQuery：使用循环创建带有图像和html的许多元素

3 个答案: