在单击w/jQuery/Javascript时创建同一Div的多个随机实例？

我试图创建一个场景，在页面上单击某个内容，然后h1将出现在一个随机位置。然而，我希望第一个h1保持在原位，另一个h1出现在另一个随机位置，在每次单击后如此。如果连续单击按钮，则页面将填充相同的h1标记。几乎就像当Windows有一个融化的窗口，加载相同的弹出窗口“弹出”，你必须点击以摆脱它们。我曾尝试自己搜索其他问题，但当试图从其他用户的问题和答案中修改代码时，代码变得相当复杂

到目前为止，我已经设法让h1标签在页面上随机移动。我还设法让它克隆了h1。然而，目前它都停留在一个长长的列表中（除了原始实例），而不是像我所希望的那样在每个实例中停止

我见过许多不同版本的创建随机部分，所以我完全愿意接受任何想法或全新的代码来实现这一点

{
$（文档）.ready（函数（）{
$（“.btn”）。单击（函数（）{
var bodyWidth=document.body.clientWidth；
var bodyHeight=document.body.clientHeight；
var randPosX=Math.floor（Math.random（）*bodyWidth）；
var randPosY=Math.floor（Math.random（）*车身高度）；
$（“.words”）.clone（）.appendTo（“body”）；
$（“.words”）.css（“左”，randPosX）；
$（“.words”）.css（“top”，randPosY）；
});
});
}

正文{
保证金：0；
填充：0；
背景色：白色；
}
.文字{
位置：相对位置；
颜色：黑色；
字体大小：20px；
左：0；
排名：0；
}

你好
点击我！

您的代码中有两个问题。首先，

$（'.words'）

选择所有

h1

元素，因此当您更新它们的

css（）

时，您将移动它们中的每一个。相反，保留对克隆元素的引用并仅移动该元素

类似地，如果每次单击只想克隆一个实例，则需要选择一个

。仅单词
元素，而不是全部，并且可以使用
：first
。试试这个：


jQuery（$=>{
$（“.btn”）。单击（函数（）{
让bodyWidth=document.body.clientWidth；
让bodyHeight=document.body.clientHeight；
设randPosX=Math.floor（Math.random（）*bodyWidth）；
设randPosY=Math.floor（Math.random（）*车身高度）；
让$clone=$（“.words:first”）.clone（）.appendTo（“body”）；
$clone.css({
左：randPosX，
上图：兰德波西
});
});
});
正文{
保证金：0；
填充：0；
背景色：白色；
}
.文字{
位置：相对位置；
颜色：黑色；
字体大小：20px；
左：0；
排名：0；
}

你好
点击我你就快到了。代码中有两个错误。第一个是位置应该是绝对的，而不是相对的。第二个是将所有h1移动到新位置。您只需要移动克隆的一个

.words {
    position: absolute;
}

$(".cheeky").clone().appendTo(".wrapper").css("left", randPosX).css("top", randPosY);

啊哈，我猜我没有把小提琴保存好，因为课程混乱。我确实把整个事情简化为基本问题。谢谢你的回答！很抱歉再次打扰您，但是您知道是否有一种方法可以通过单击多次触发此操作吗？那么点击一次，h1会一个接一个地出现吗？也许是使用for循环或其他什么，所以可以定义实例的数量？非常感谢。当然，您可以使用在给定延迟时调用函数，这会向页面添加新的
h1