时间戳

首页 > 解决方案 > 单击 jQuery 后重复单击功能克隆 Div？

html - 单击 jQuery 后重复单击功能克隆 Div？

问题描述

继上一个问题之后，我现在有一个函数可以在单击后使用克隆创建 div 并将它们随机放置在页面上。

但是，我也希望能够单击一次按钮，然后一个接一个地创建一定数量的 div，而不必多次按下按钮。所以单击按钮一次，然后在页面上随机创建 10 个 div，一个接一个。好像有人在点击按钮。

我试过使用 setInterval，但我只能延迟点击和实际 div 出现之间的时间。我考虑过使用 for 循环并尝试在周围闲逛，但这也没有让我到任何地方。

感谢您的任何帮助！

{
  $(function() {
    $(".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.3.1/jquery.min.js"></script>

<body>
  <h1 class="words">
    Hello!
  </h1>
  <button class="btn" type="button">Click Me!</button>
</body>

标签： htmljquerycss

解决方案

为了实现您的目标，您需要定义一个新调用，其中包含在随机位置setInterval()创建元素的当前逻辑。h1它所需要的只是额外检查有多少元素已添加到 DOM。如果它是 10 或更多，请调用clearInterval()以停止创建更多。

$(function() {
  let interval;
  $(".btn").click(function() {
    clearInterval(interval);
    interval = setInterval(function() {
      if ($('.words').length >= 10) {
        clearInterval(interval);
        return;
      }     
        
      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,
      });
    }, 500);
  });
});
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>
<h1 class="words">
  Hello!
</h1>
<button class="btn" type="button">Click Me!</button>

推荐阅读