我正在尝试创建一个场景，单击页面上的某些内容，然后 h1 将出现在随机位置。但是，我希望第一个 h1 保持在原位，而另一个 h1 出现在另一个随机位置，依此类推。如果连续单击该按钮，页面将充满相同的 h1 标签。几乎就像 Windows 融化并“弹出”大量相同的弹出窗口一样，您必须单击才能摆脱它们。我自己尝试通过搜索其他问题来做到这一点，但是当尝试根据其他用户的问题和答案进行调整时，代码变得非常复杂。
到目前为止，我已经成功地让 h1 标签在页面上随机移动。我还设法让它克隆 h1.然而，目前它全部保留在一个长列表中(除了原始实例)，而不是像我希望的那样在每个实例处停止。
我见过许多不同版本的创建随机部分的方法，因此我完全愿意接受任何想法或全新的代码来使其正常工作。
{
$(document).ready(function () {
$(".btn").click(function () {
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
var randPosX = Math.floor(Math.random() * bodyWidth);
var randPosY = Math.floor(Math.random() * bodyHeight);
$(".words").clone().appendTo("body");
$(".words").css("left", randPosX);
$(".words").css("top", randPosY);
});
});
}body {
margin: 0;
padding: 0;
background-color: white;
}
.words {
position: relative;
color: black;
font-size: 20px;
left: 0;
top: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1 class="words">
Hello!
</h1>
<button class="btn" type="button">Click Me!</button>
</body>最佳答案
您的代码中有两个问题。首先，$('.words') 选择所有 h1 元素，因此当您更新它们的 css() 时，您将移动每个元素其中之一。相反，保留对克隆元素的引用并仅移动该元素。
类似地，如果您只想每次点击克隆一个实例，则只需选择一个 .words 元素，而不是全部，并且 :first 可以是用于此。试试这个:
jQuery($ => {
$(".btn").click(function() {
let bodyWidth = document.body.clientWidth;
let bodyHeight = document.body.clientHeight;
let randPosX = Math.floor(Math.random() * bodyWidth);
let randPosY = Math.floor(Math.random() * bodyHeight);
let $clone = $(".words:first").clone().appendTo("body");
$clone.css({
left: randPosX,
top: randPosY
});
});
});body {
margin: 0;
padding: 0;
background-color: white;
}
.words {
position: relative;
color: black;
font-size: 20px;
left: 0;
top: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 class="words">
Hello!
</h1>
<button class="btn" type="button">Click Me!</button>关于javascript - 使用 jQuery/Javascript 单击时创建同一 Div 的多个随机实例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66458431/