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之间的随机数，并将其放在地址中以定位图像。这在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标记了这一点，我将首先使用它！

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

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

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>

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

2 个答案:

修改

修改