HTML - 如何在div内的img = src地址中生成随机数

Question

Hi_I我试图让一个随机数出现在div中的img src=地址内，这样每次加载div时都会生成一个随机图像。

我有10张图片，他们的目录地址是：

"pictures/number1.jpg"
"pictures/number2.jpg"
"pictures/number3.jpg"
................
"pictures/number10.jpg"

我可以使用以下Javascript随机选择其中一个：

var num = Math.floor(Math.random() * 10 + 1); 
img.src = "pictures/number" +num +".jpg";

这会生成1到10之间的随机数，并将其放在地址内以定位图像。 当img.src在Javascript文件中使用时，这非常img.src ，但我想知道当img src=是HTML页面的一部分时是否可以使用此方法。 我正在尝试将类似的过程应用于以下HTML代码：

<script>
var num = Math.floor(Math.random() * 10 + 1); 
randomimage = "pictures/number" +num +".jpg";
</script>

<div id="JohnDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JackDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JaneDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1 /> </div>

这不起作用，它只是向我显示alt=消息。 我不确定我是否正确定义了randomimage 。 我真的很困惑如何以正确的方式做到这一点，任何帮助将不胜感激！

提前致谢！

Answer 1

编辑

至于为什么你的代码不工作：你不能用纯HTML将randomimage应用于图像源。 你必须使用Javascript来做到这一点。 要做到这一点，你必须选择你想要操作的元素，并通过Javascript修改src属性。

---

既然你用jQuery标记了这个，我就开始使用它！

您可以在myClass1类上使用.each()循环迭代每个图像，并使用给定的类更改每个图像的图像src。

小提琴

 $('.myClass1').each(function() { var num = Math.floor(Math.random() * 10 + 1), img = $(this); img.attr('src', 'pictures/number' + num + '.jpg'); img.attr('alt', 'Src: ' + img.attr('src')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> 

出于测试目的，图像的alt属性设置为图像的src 。

编辑

这是使用普通Javascript的另一种解决方案。

小提琴

 var imgs = document.getElementsByClassName('myClass1'); for (var i = 0; i < imgs.length; i++) { var num = Math.floor(Math.random() * 10 + 1); imgs[i].src = 'pictures/number' + num + '.jpg'; imgs[i].alt = imgs[i].src; } 

 <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> <div class="JohnDiv"> <img src="" class="myClass1" alt="Not Working!" /> </div> 

Answer 2

为img标记分配一个id

<img src="" alt="If you can see this, then the image didn't load properly" class="myclass1" id="sample"/>

在您的javascript中，您可以随时添加自己选择的src

<script>
var num = Math.floor(Math.random() * 10 + 1); 
randomimage = "pictures/number" +num +".jpg";
document.getElementById('sample').src=randomImage;
</script>