Question

我试图将一些字符串附加到一个部分，并希望在x秒后从DOM中删除每个字符串。我的代码出了什么问题？

例如：

JS和HTML：

var strings= ['one', 'two', 'three'];
var removeAfter = 0;
for(i in strings){
  removeAfter += 5;
  $('#stringsHolder').append(strings[i]);
  setTimeout(function(){
    $("#stringsHolder").last().remove();
  }, removeAfter);  
}

<section id="stringsHolder">

Answer 1

您的ID在html stringHolder中不正确，但在js stringsHolder中，感谢@Anthony Grist

var strings = ['one', 'two', 'three'];
var removeAfter = 0;
for (i in strings) {
    $('#stringHolder').append("<div>" + strings[i] + "</div>");
    removeAfter += 500;
    (function (removeAfter) {
        setTimeout(function () {
            $("#stringHolder").children().last().remove();
        }, removeAfter);
    })(removeAfter);
}

<强> Demo

Answer 2

这里有一些错误。

您在HTML中使用stringHolder，在JS中使用stringsHolder。
5毫秒非常短。

更大的问题：

您附加一个字符串，而不是一个元素。
您删除了stringHolder元素本身。

要解决3，而不是.append(strings[i])，你应该做.append('<span>' + strings[i])或类似的东西，以便它被包裹在一个元素中。（虽然这可能不是您的实际代码。）

要解决4，您需要选择元素的子元素：$("#stringsHolder").children().last().remove();

＆＃13;

var strings = ['one', 'two', 'three'];
var removeAfter = 0;
for (i in strings) {
  removeAfter += 500;
  $('#stringsHolder').append('<span>' + strings[i]);
  setTimeout(function() {
    $("#stringsHolder").children().last().remove();
  }, removeAfter);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="stringsHolder"></section>

＆＃13;

在运行时将字符串附加到DOM并在X秒后将其删除

2 个答案: