控制两个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。