Question

我有一个div，当您单击按钮时会出现，并在4秒钟后删除。
问题是，当它出现几次时，会在最初的4秒钟后立即删除
因此，当我单击该按钮时，将显示div，并在4秒钟后将其删除，但是当我在3秒后再次单击该按钮时，将出现另一个div，它将在1秒内删除。
我希望每个div有4秒，你不知道该怎么做吗？

HTML

<button onclick='div()'>Add div</button>
<div class='content'></div>

JavaScript

function div(){
 $('.content').append('<div class="newDiv">text...</div>');

 setTimeout(function(){
   $('.newDiv').remove();
 }, 4000); 
}

Answer 1

记住要添加的div，然后将其删除：

function addDiv(){
    var div = $('<div class="newDiv">text...</div>');
    $('.content').append(div);

    setTimeout(function(){
        div.remove();
    }, 4000); 
}

（我更改了函数的名称，因为函数名称应为动词，并且我在函数内使用div来引用div。）

旁注：我建议您不要使用onXyz-属性样式的事件处理程序，这尤其重要，因为这意味着您的事件处理程序功能必须是全局的，并且全局名称空间是 really >拥挤。而是选择按钮并使用on：

$("selector-for-the-button").on("click", addDiv);

实时示例：

// Scoping function to avoid creating globals
(function() {
    var counter = 0; // Just for demonstration purposes, so we can tell them apart
    function addDiv(){
        var div = $('<div class="newDiv">div #' + counter + '...</div>');
        ++counter;
        $('.content').append(div);

        setTimeout(function(){
            div.remove();
        }, 1200); // Shortened time for demo
    }
    $(".add-div").on("click", addDiv);
})();

<button class="add-div">Add div</button>
<div class='content'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

创建单个id而不是class。因为类名选择所有相同的类元素名

var inc = 0;

function div() {
  var id = "newDiv_" + inc;
  $('.content').append('<div id="' + id + '">text' + inc + '...</div>');

  setTimeout(function() {
    $('#' + id).remove();
  }, 4000);
  inc++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick='div()'>Add div</button>
<div class='content'></div>

如何删除名称相同但时间不同的新div

2 个答案: