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>