1

順序付けられていない画像のリストがあります。これらの画像のそれぞれにhref属性を持たせたいのですが（ライトボックスポップアップを使用して、クリックしたときに相関する画像を表示したいので）、ページが更新されたときに各画像がランダムになります。

つまり、各画像とそのhrefがランダムに結合されますが、ulの順序は同じままです。これを達成する方法は何でしょうか？

4

2 に答える 2

2 
var img_array = []; //assuming your array is called this and full of porn pictures

//fisher-yates algorithm. Google it
(function(){
    var tmp, current, top = img_array.length;
    if(top) while(--top) {
        current = Math.floor(Math.random() * (top + 1));
        tmp = img_array[current];
        img_array[current] = img_array[top];
        img_array[top] = tmp;
    }
})();

//target html element where the images are appended
var target = document.getElementById('someTargetDiv');

for(var i=0, len=img_array.length; i<len; i++){
    var link = document.createElement('a'),
        img = document.createElement('img');

    link.setAttribute('href', img_array[i]);
    img.setAttribute('src', img_array[i]);

    link.appendChild(img);
    target.appendChild(link);
}

これは、この種の操作を行うための最適化された方法ではありません。理解を深めるために、少し冗長にしました。

このコードの最大の間違いは、多くの異なる要素を絶え間なく作成し、一度に 1 つずつ DOM に追加していることです。実際にすべきことは、生成された html の文字列を作成し、ターゲット div の innerHTML を 1 回の操作で変更することです。

var html = [];
for(var i=0, len=img_array.length; i<len; i++){
    html.push('<a href="'+ img_array[i] +'"><img src="'+ img_array[i] +'"></a>');
}

target.innerHTML = html.join('');
于 2012-09-25T12:08:10.100 に答える
0

うまくいけば、私はこれを正しく理解します。

jQueryを使用すると、次のjsfiddleのように実行できます。

$('ul').children('li').sort(function() {
    return Math.round(Math.random()); // randomly get 0 or 1
}).appendTo('ul');

サーバー側でPHPを使用する方が理にかなっていますが、dbリソースなどがないため、image：linkペアの静的配列を作成し、それをシャッフルしてランダムリストを生成する必要があります。

アップデート

多分これは解決策に近づきます：

jsfiddle

var contents = new Array(),
    $list = $('li');

$list.each(function() { contents.push($(this).children()); });

contents.sort(function() {
    return 0.5 - Math.random();
});

$list.each(function() {
    $(this).append(contents.shift());
});
于 2012-09-25T12:10:03.507 に答える