如何在每个动态创建的图像下面显示一个数字？

我想显示一个特定图像的次数与用户给出的次数一样多，这部分就完成了。但我想在每张图片下方显示一个数字。例如，如果用户输入是4，则应该有4张图像在第一张图像'2'下面的'1'下面。图片也必须是可点击的。如何在每个动态创建的图像下面显示一个数字？

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to add a new element to the array.</p> 
 
<input type="number" id="myNumber" value=""> 
 
<button onclick="imag()">Try it</button> 
 

 

 
<div id="demo"> 
 

 
<script> 
 
function imag(c,x) { 
 
var x = document.getElementById("myNumber").value; 
 
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>"; 
 
    
 
    var arr = []; 
 
    for (var i = 0; i < x; i++) { 
 
    arr.push(c); 
 
    
 
document.getElementById("demo").innerHTML = arr.join("&nbsp&nbsp"); 
 

 
} 
 
} 
 

 

 
</script> 
 

 
</body> 
 
</html>

来源

2015-04-05 mohit

你已经拥有你在你的循环，寻找号码。所以你可以像这样简单地将它添加到你的数组中。

JS：

function imag() { 
    var x = document.getElementById("myNumber").value; 
    var c = "<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>"; 

    var arr = []; 
    for (var i = 0; i < x; i++) { 
     arr.push("<div class='image'>" + c + "<br />" + (i+1) + "</div>"); 
    } 

    document.getElementById("demo").innerHTML = arr.join("&nbsp&nbsp"); 
}

CSS：

div.image { 
    display: inline-block; 
}

来源

2015-04-05 13:19:21 dersvenhesse

这会得到图像右侧的数字。它必须低于图像 – mohit 2015-04-05 13:26:44

@mohit我编辑我的答案与一些CSS显示图像下方的数字。 – dersvenhesse 2015-04-05 13:33:03

var imageSrc = "http://fc08.deviantart.net/fs71/f/2010/148/1/9/20x20_PNG_Icons_DOMO_by_JMcIvor.png"; 
 

 
function imag(c,x) { 
 
    var x = document.getElementById("myNumber").value; 
 
    var demo = document.getElementById("demo"); 
 
    
 
    var container = document.createElement("div"); 
 
    container.setAttribute("class", "container"); 
 
    
 
    for(var i=0; i<x; i++) { 
 
    var image = document.createElement("img"); 
 
    image.setAttribute("class", "image"); 
 
    image.setAttribute("src", imageSrc); 
 
    container.appendChild(image); 
 
    var text = document.createElement("div"); 
 
    text.innerHTML = i+1; 
 
    container.appendChild(text); 
 
    demo.appendChild(container); 
 
    } 
 
}

#demo { 
 
} 
 

 
.container { 
 
} 
 

 
.image { 
 
} 
 

 
.text { 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p>Click the button to add a new element to the array.</p> 
 
<input type="number" id="myNumber" value=""> 
 
<button onclick="imag()">Try it</button> 
 

 
<div id="demo"></div> 
 

 
</body> 
 
</html>

我刚换一张图片的URL来测试代码，您的更换。我希望这有帮助。

来源

2015-04-05 13:25:54 ohannes

如何在每个动态创建的图像下面显示一个数字？

回答

相关问题