控制两个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并在{之后添加类{1}}。

希望这有帮助！

巴勃罗。