Question

var offset = 0;
var delay = 100;    
$(document).ready(function(){

    for(let z=0;z<=6;z++){
        setDelay(z);
        delay += 100;
    }

    function setDelay(z) {
        setTimeout(function(){

            //Create clone
            var c2 = $(".cHeader").eq(0).clone().appendTo("#contact");

            //Set position
            offset += 20;
            $(c2).css("left", offset+"px");

        }, delay);

    }

    $(".cHeader").first().remove();

});

我正在尝试每100ms创建一个元素的克隆，直到达到7，然后在创建7个克隆后删除第一个元素。上面的代码可以创建7个克隆，没有任何问题，但是当我添加$(".cHeader").first().remove();来删除第一个元素时，它将使用cHeader类删除所有元素。但是我只希望它使用cHeader类删除第一个元素。

HTML：

<div id="contact">
    <h1 class="cHeader">hdr</h1>
</div>

Answer 1

它将删除带有cHeader类的每个元素。

实际上是在克隆之前删除了标头，所以没有要克隆的东西。

此代码：

 setTimeout(cloneHeader, 100)
 removeHeader()

与以下相同：

 removeHeader()
 cloneHeader()

即removeHeader（）在cloneHeader代码之前称为，因此没有要克隆的内容。

您可以改为隐藏标头，例如：

$(".cHeader").first().hide()

然后在克隆时：

var c2 = $(".cHeader").eq(0).clone().appendTo("#contact");
c2.show();

Answer 2

如果您使用setInterval而不是setTimeout，则可以避免使用全局变量，并使代码更具可读性（我相信）。

还要在7个循环之后将$('.cHeader').first().remove()移动到，以便保留该元素供您克隆-在第一个循环开始之前将其删除之前循环

$(document).ready(function() {

  function cloneElements() {
    let i = 0;
    let cloneInterval = setInterval(() => {
      // Create clone
      let count = $('#contact .cHeader').length;
      let c2 = $(".cHeader").first().clone().appendTo("#contact");

      // Set position
      c2.css('left', `${count * 20}px`);

      // Stop after 7
      i = i + 1;
      if (i >= 7) {
        clearInterval(cloneInterval);
        $('.cHeader').first().remove();
      }
    }, 100);
  }

  cloneElements();

});

.cHeader {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="contact">
  <h1 class="cHeader">hdr</h1>
</div>

删除功能未按预期删除

2 个答案: