javascript - 仅在第一次尝试时成功删除弹出窗口可见性

Question

以下代码的工作原理是它会导致警报出现并在 3 秒后消失。问题是，当我第二次触发它时(不刷新浏览器)，它会出现但不会第二次超时并消失，除非单击 x。我怎样才能让它在没有用户退出的情况下不断出现和消失？

请看以下内容:

function appendWarning () {
    // missing
    if(!result) {
      $(".confirmAlert").append('class="alert alert-danger" role="alert">Oh snap! Something went terribly wrong!</div>');
    } else {
        var confPop = $(".confirmAlert").append('<div id="confrimedLuck" class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + rand + '</div>');
        console.log("confPop BANG!");
    }
    var cleanAlert = setTimeout(function(){ document.getElementById('confrimedLuck').style.display = 'none'}, 3000);
    console.log("cleanAlert executed!");
}

Answer 1

你的问题是你追加，但每次都将显示设置为无而不是删除它，所以你最终会得到相同 id 的重复元素，并且只选择第一个已经隐藏的元素。

不要将显示设置为无，而是将其删除:

var cleanAlert = setTimeout(function(){ $('#confrimedLuck').remove() }, 3000);

或者，如果您愿意，您可以让它始终出现在 DOM 中，同时只需切换其显示属性(使用 jQuery 最方便，因为您已经在使用它)。

// missing
if(!result) {
  $(".confirmAlert").append('class="alert alert-danger" role="alert">Oh snap! Something went terribly wrong!</div>');
} else {
    var confPop = $("#confrimedLuck").show().parent();
    console.log("confPop BANG!");
}
var cleanAlert = setTimeout(function(){ $('#confrimedLuck').hide() }, 3000);
console.log("cleanAlert executed!");