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

Question

嗨_我正在尝试让一个随机数出现在一个 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= 是 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

为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>

Answer 2

编辑

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

---

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

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

Fiddle

$('.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 的解决方案。

Fiddle

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>