javascript - 控制两个div的随机显示

Question

我正在寻找一种方法，当用户单击正文时，在 4 个可用空间的随机位置，每行仅显示一个黑色矩形。 我知道我必须设置一个条件语句，但我不知 Prop 体怎么做。

这是我的代码: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 之间。然后当且仅当它在行中的位置时，你克隆一个黑色方 block (i % 4) 等于刚刚定义的随机位置:

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

我也做了一些调整，比如包括一个防止多次执行的控件(running 变量)和改进 jQuery 调用的顺序(拥有原始元素 class less 并在 clone() 之后添加类。

希望这对您有所帮助!

巴勃罗。