控制兩個div的隨機顯示

Question

我正在尋找一種方法，在用戶單擊正文時，在每行上只顯示一個黑色矩形，位於4個可用空間的隨機位置。 我知道我必須設置一個條件聲明，但我無法弄清楚究竟如何。

這是我的代碼：http://jsfiddle.net/y87gjyeo/1/所有的

$(document).on('click',function(){ 
    setInterval(function(){ 
     var math= Math.round(Math.random()); 
     $("#div").removeClass(); 
     $("#div").addClass("rectangle_" + math).clone().fadeIn().appendTo("#container") 
    },1000); 
}) 

Answer 1

首先，你不應該對不同的元素使用相同的id。如果您正在克隆元素，請改用類。

有很多解決方案。我特別有一個櫃檯i。每當你開始行（i % 4 == 0）你隨機分配0和3之間。隨後的黑匣子位置，你克隆一個黑色方形當且僅當其行（i % 4）中的位置等於剛纔定義的隨機位置：

http://jsfiddle.net/2Lf53prx/2/

我也做了一些調整，比如包括控制，以防止多個執行（running變量）和改進的jQuery的順序調用（有原始元素class越來越clone()之後添加類。

希望這幫助！

Pablo。