隨機div類訂單

正如許多人所建議的那樣，我接受了他們的建議並改革了我的問題。我拿出了很多代碼，現在只顯示最少的代碼。希望這足以讓我重新提出我的問題。隨機div類訂單

我有以下小提琴： http://jsfiddle.net/mauricederegt/vNpYe/5/

具有以下HTML：

<div id="main" tabindex="1"> 
      <div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div> 
      <div class="tile tile3" block-id="2" style-id="2" style="left:100px; top:0px"></div> 
      <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> 
      <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> 
      <div class="tile tile2" block-id="5" style-id="2" style="left:0px; top:100px"></div> 
      <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> 
</div>

我試圖關閉隨機div的類的順序。所以只需class部分：class="tile tile1"，div的所有其他項應保持原樣。

例子：的代碼看起來是這樣的隨機化（請注意，只有在class洗牌）後：

<div id="main" tabindex="1"> 
       <div class="tile tile3" block-id="1" style-id="1" style="left:0px; top:0px"></div> 
       <div class="tile tile2" block-id="2" style-id="2" style="left:100px; top:0px"></div> 
       <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div> 
       <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div> 
       <div class="tile tile1" block-id="5" style-id="2" style="left:0px; top:100px"></div> 
       <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div> 
    </div>

我怎樣才能得到div的類以隨機順序顯示？

希望現在的問題更加清楚。

非常感謝

來源

2013-03-31 Maurice

是在演示審查代碼荒謬量。特別是因爲你還沒有定義什麼'shuffle style'甚至意味着什麼，或者什麼樣的層次或級別在演示的上下文中意味着什麼。應該縮小演示的範圍，以呈現足夠的代碼來呈現問題，而不是整個應用程序。當然，你可以刪除大部分渲染代碼，並用靜態html代替，只需要足夠的腳本來處理你正在嘗試做的任何事情。 – charlietfl

我不同意代碼量。我擺弄它獲得額外的支持。刪除它或其中的評論，會使事情變得更加模糊。儘管如此，我發現了一個書面錯誤。我修補了div的課程，而不是風格。更正了此問題並添加了一個額外的HTML示例 – Maurice

@Maurice：如果您想了解如何在jQuery中執行某個特定操作，請提供該問題的最簡單版本。想象一下，在計算機課程的第一天，你就是一名教師。你會如何向學生展示它，以便他們確切地瞭解問題的本質（在問他們或教他們如何解決這類基本問題之前）？這是在Stackoverflow上提問的方式。研究這個問題，直到你理解這個問題，並把它簡化爲最簡單的形式。 –

首先，您需要一個瓦片類的數組。

var tiles = [], 
tile_re = /tile(\d+)/; 

$('.tile').each(function(i) { 
    tiles[i] = this.className.match(tile_re)[0]; 
});

然後，你需要洗牌類的數組：

function shuffle(a) 
{ 
    var t; 

    for (var i = a.length - 1; i > 0; --i) { 
    var p = Math.floor(Math.random() * (i + 1)); 
    if (p !== i) { 
     t = a[i]; 
     a[i] = a[p]; 
     a[p] = t; 
    } 
    } 
} 

shuffle(tiles);

最後，合併的結果反饋：

$('.tile').each(function(i) { 
    this.className = 'tile ' + tiles[i]; 
});

來源

2013-04-08 23:33:25

謝謝你完美的作品。如果其他人想看到它在行動，我已經做了一個小提琴：http://jsfiddle.net/mauricederegt/EFCex/ – Maurice

隨機div類訂單

回答

相關問題