Question

在我的html文件中我有这样的东西：

<p class="image">
<img src="images/20.jpg" alt="20!" width="90" height="125" border="0">
<img src="images/19.jpg" alt="19!" width="90" height="125" border="0">
<img src="images/18.jpg" alt="18!" width="90" height="125" border="0">
<img src="images/17.jpg" alt="17!" width="90" height="125" border="0">
<img src="images/16.jpg" alt="16!" width="90" height="125" border="0">
<img src="images/15.jpg" alt="15!" width="90" height="125" border="0">
<img src="images/14.jpg" alt="14!" width="90" height="125" border="0">
<img src="images/13.jpg" alt="13!" width="90" height="125" border="0">
<img src="images/12.jpg" alt="12!" width="90" height="125" border="0">
<img src="images/11.jpg" alt="11!" width="90" height="125" border="0">
</p>

是否有可能用任何循环脚本替换重复代码？我是全新的：）

Answer 1

Javascript： - 使用for循环倒计时并在演示ID中添加HTML。

＆＃13;

text = "";
var c;

for (var c=20;c > 10;c--){
    text += '<img src="images/' + c + '.jpg" alt="' + c + '!" width="90" height="125" border="0">';
}

document.getElementById("demo").innerHTML = text;

＆＃13;

<p id="demo"></p>

＆＃13;

Answer 2

要不使用jQuery并且只使用JavaScript，我会做以下事情：

（为了方便起见，我给了p标签一个id，而不是一个类。我们可以使用一个类，只需要另一行代码。）

HTML

<p id="image">

</p>

使用Javascript：

for(var i=0; i<20; i++){
    document.getElementById('image').innerHTML += '<img src="http://placehold.it/350x'+ (150 +i) +'" alt="'+ i + '!" width="90" height="125" border="0">';   
}

这是一个有效的JSFiddle：

http://jsfiddle.net/m071yzsw/

Answer 3

当然，您可以使用document.createElement(tagName)

创建元素（HTML中的“标记”）

执行您想要的操作的脚本如下所示：

// this is your <p class="image"></p> tag
var imageContainer = document.getElementsByClassName("image")[0];
// placeholder for upcoming images
var image;
// i = 20 is the starting image, i > 10 goes down to but doesn't include 10
for (var i = 20; i > 10; i--) {
    image = document.createElement("img");
    image.setAttribute("src", images + "/" + i + ".jpg");
    image.setAttribute("alt", i + "!");
    image.setAttribute("width", 90);
    image.setAttribute("height", 125);
    image.setAttribute("border", 0);
    imageContainer.appendChild(image);
}

更好的选择，如果你要做很多事情，就是使用模板库。这些允许你编写一种HTML“骨架”，然后你可以用javascript填写空白。

Answer 4

也许这个：

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src="images/"+i+".jpg";//change image
    imgs[i].alt=i+"!";//change attribute
}

这是贯穿所有图像的方法之一。当然，您可以使用将要插入的参数插入一个对象数组

var data=[
    {src:"img/img1.png",alt:"alt1"},
    {src:"img/img2.png",alt:"alt2"},
    {src:"img/img3.png",alt:"alt3"},
    {src:"img/img4.png",alt:"alt4"},
    {src:"img/img5.png",alt:"alt5"},
    {src:"img/img6.png",alt:"alt6"},
    {src:"img/img7.png",alt:"alt7"},
    {src:"img/img8.png",alt:"alt8"},
    {src:"img/img9.png",alt:"alt9"},
    {src:"img/img10.png",alt:"alt10"},
];

var imgs=document.querySelectorAll("p.image img");//array of img objects
for(var i in imgs){//loop
    imgs[i].src=data[i].src;//change image
    imgs[i].alt=data[i].alt;//change attr
}

Answer 5

尝试使用Jquery：

//use for loop to loop over your images
    for(var i=20;i>10;i--){
    $('.image').append( '<img src="images/'+i+'.jpg" alt='+i+'!" width="90" height="125" border="0">' );//get the item with class "image" and appended your images
    }

JavaScript而不是重复的HTML行

5 个答案: