打乱图像 - 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

我认为您最好的选择是为每个 img 元素添加一个类（比如说 random）：

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

然后我们就可以通过一个简单的querySelectorAll得到所有图片：

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

随机化srcs的数组：

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