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

Question

Hi_I我试图让一个随机数出现在img src=div 的地址内,这样每次加载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

编辑

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

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

您可以.each()在myClass1类上使用循环来迭代每个图像,并使用给定的类更改每个图像的图像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>