Question

我想实现一个shuffle函数，我有这段代码，当图像不在表格中时有效 -

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

这是一个有效的工作。我将id添加到父div中，如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/

在桌子周围洗牌图像

1 个答案: