洗牌图像周围

Question

我想实现一个随机播放功能，我有这样的一段代码的图像时，在表中没有哪个工作 -

var a = $("#deck > div").remove().toArray(); 
for (var i = a.length - 1; i >= 1; i--) { 
    var j = Math.floor(Math.random() * (i + 1)); 
    var bi = a[i]; 
    var bj = a[j]; 
    a[i] = bj; 
    a[j] = bi; 
} 
$("#deck").append(a); 

，这是代码 - http://jsfiddle.net/kommandoss/YuRpU/39/

任何帮助赞赏，谢谢

Answer 1

这是一个工作jsiddle。我将id添加到父级divs，如id =“0”... id =“7”。我还添加了class =“letter”，以便能够计算图像的数量并在计算中使用它。该代码基本上只是遍历36倍和开关，在2周随机的div互相2个随机字母：

<table border="1"> 
<tr> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event);" id="0"> 
      <img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true" class="letter"/> 
     </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="1"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png" ondragstart="drag(event);" id="b" draggable="true"/> </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="2"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png" ondragstart="drag(event);" id="c" draggable="true" class="letter"/> </div> 
    </td> 
</tr> 

<tr> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="3"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png" ondragstart="drag(event);" id="d" draggable="true"/> </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="4"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" ondragstart="drag(event);" id="f" draggable="true" class="letter"/> </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="5"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png" ondragstart="drag(event);" id="g" draggable="true" class="letter"/> </div> 
    </td> 
</tr> 

<tr> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="6"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png" ondragstart="drag(event);" id="h" draggable="true" class="letter"/> </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)" id="7"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png" ondragstart="drag(event);" id="i" draggable="true" class="letter"/> </div> 
    </td> 
    <td> 
     <div ondrop="drop(event);" ondragover="allowDrop(event)"> </div> 
    </td> 
</tr> 

function shuffleLetters() 
{ 
    var amount = $('.letter').length; 
    var foundSix = false; 
    var x; 
    for(x = 0; x < 36; x++) { 
     var randomNum1 = Math.round(Math.random()*amount); 

     if(randomNum1 == 6 && !foundSix) 
     { 
      randomNum1 = 7; 
      foundSix = true; 
     } 
     var randomNum2 = Math.round(Math.random()*amount); 
     var randomHtml1 = $("#"+randomNum1).html(); 
     var randomHtml2 = $("#"+randomNum2).html(); 
     $("#"+randomNum1).html(randomHtml2); 
     $("#"+randomNum2).html(randomHtml1); 
    } 
} 

$(function() { 
    shuffleLetters(); 
}); 

http://jsfiddle.net/YuRpU/52/