爭奪圖像-Javascript

Question

我有一張3x4的圖像表，我想像拼圖一樣亂七八糟。總共有12個獨立的GIF。我需要幫助的地方是，嚴格使用JavaScript，我怎麼設置它，以便在每次頁面加載時隨機加擾圖像？到目前爲止，我已加載的所有圖片到一個數組，像這樣：

不完整的JS：

var imgArray = new Array(); 

imgArray[0] = new Image(); 
imgArray[0].src = 'pic_01.gif'; 

imgArray[1] = new Image(); 
imgArray[1].src = 'pic_02.gif'; 

imgArray[2] = new Image(); 
imgArray[2].src = 'pic_03.gif'; 

imgArray[3] = new Image(); 
imgArray[3].src = 'pic_04.gif'; 

etc... pic_05.gif... 

我的HTML：

<table> 
<tr> 
    <th> <img src="pic_01.gif" onclick="imageSwap()" alt="" border= height=100   width=100></img> </th> 
    <td> <img src="pic_02.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_03.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_04.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_05.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_06.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_07.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_08.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_09.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
<tr> 
    <td> <img src="pic_10.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_11.gif" alt="" border= height=100 width=100></img></td> 
    <td> <img src="pic_12.gif" alt="" border= height=100 width=100></img></td> 
</tr> 
</table> 

我最終會想要做的是能讓用戶點擊一個「隨機」圖像，並將其與另一個「隨機」圖像交換，以解決這個難題。任何輸入是讚賞！謝謝！

Answer 1

我認爲最好的方法是添加一個類（比方說random）每個img元素：

<img src="pic_10.gif" class="random" alt="" height=100 width=100 /> 

然後，我們可以得到所有的圖像用一個簡單的querySelectorAll：

var images = document.querySelectorAll('.random'); 

隨機數組src s：

var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc]; 
srcs = srcs.sort(function() { return Math.random() > 0.5; }); 

然後在圖像上迭代，採用新的SRC每個：

for (var i = 0; i < images.length; ++i) { 
    images[i].src = srcs[i]; 
} 

全功能的存在：

var imageSwap = function() { 
    var images = document.querySelectorAll('.random'); 

    var srcs = ['pic_01.gif', 'pic_01.gif', etc, etc]; 
    srcs = srcs.sort(function() { return Math.random() > 0.5; }); 


    for (var i = 0; i < images.length; ++i) { 
    images[i].src = srcs[i]; 
    } 
}; 

Example JSFiddle