随机插入和随机旋转

Question

我在 div 中以随机顺序插入图像。

我还想随机旋转图像。我有 Jquery 和一个用于 jquery 的旋转插件，只需键入类似的内容即可 $("#img").rotate(45);

这是我的图像随机顺序代码：

var contents=new Array (

'<img class="karkki" class="omenalaku" src="images/omenalaku01.png"      onclick="image_control001();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku02.png" onclick="image_control002();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku03.png" onclick="image_control003();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku04.png" onclick="image_control004();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku05.png" onclick="image_control005();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku06.png" onclick="image_control006();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku07.png" onclick="image_control007();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku08.png" onclick="image_control008();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku09.png" onclick="image_control009();" alt="omenalaku" />',

'<img class="karkki" class="omenalaku" src="images/omenalaku10.png" onclick="image_control010();" alt="omenalaku" />'
);

// insert elements in random order inside the candybox div
var i=0
//variable used to contain controlled random number 
var random

//while all of array elements haven't been cycled thru
while (i<contents.length){
    //generate random num between 0 and arraylength-1
    random = Math.floor(Math.random()*contents.length)
        //if element hasn't been marked as "selected"
    if (contents[random]!="selected"){
        $(".candybox").append(contents[random]);
        //mark element as selected
        contents[random]="selected"
        i++
    }
}

是否可以将随机旋转插入到同一个 while 循环中？我的尝试导致每张图像都具有相同的旋转量。我希望每张图片都有不同的旋转值。

编辑：

这是我微弱的尝试：

// insert elements in random order inside the candybox div
var i=0
//variable used to contain controlled random number 
var random

//while all of array elements haven't been cycled thru
while (i<contents.length){
    //generate random num between 0 and arraylength-1
    random = Math.floor(Math.random()*contents.length);
    randomrot = Math.floor(Math.random()*360);
    //if element hasn't been marked as "selected"
    if (contents[random]!="selected"){
        $(".candybox").append(contents[random]);
        contents[random].rotate(randomrot);
        //mark element as selected
        contents[random]="selected"
        i++
    }
}

这会导致控制台错误Object <img class="karkki" class="omenalaku src="images/omenalaku03.png" onclick="image_control003();" alt="omenalaku" /> has no method 'rotate'。好像我试图错误地访问 DOM 元素的旋转插件，但是如何正确地做到这一点？

Answer 1

替换这两行：

$(".candybox").append(contents[random]);
contents[random].rotate(randomrot);

用这个：

contents[random].appendTo(".candyBox").rotate(randomrot);