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

以下代码会导致警报出现，然后在3秒钟后消失。问题是，当我第二次触发它时（不刷新浏览器），它会再次出现但不会超时，除非单击x，否则它会消失。我怎样才能让它在提示下不断出现和消失，而不让用户x'ing离开

请参见以下内容：

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!");
}

函数appendWarning（）{
//失踪
如果（！结果）{
$（“.confirmAlert”）.append（'class=“alert-alert-danger”role=“alert”>噢，天哪！出了大问题！”）；
}否则{
var confPop=$（“.confirmAlert”）.append（“×；”+rand+”）；
console.log（“confPop-BANG！”）；
}
var cleanAlert=setTimeout（函数（）{document.getElementById（'confrimedLuck'）.style.display='none'}，3000）；
log（“cleanAlert已执行！”）；
}

您的问题是要追加，但每次都将display设置为none，而不是将其删除，因此最终会出现相同id的重复元素，并且只选择第一个已隐藏的元素

将其删除，而不是将“显示”设置为“无”：

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

或者，如果您愿意，您可以在切换其display属性的同时使其始终存在于DOM中（使用jQuery最方便，因为您已经在使用它）

//缺少
如果（！结果）{
$（“.confirmAlert”）.append（'class=“alert-alert-danger”role=“alert”>噢，天哪！出了大问题！”）；
}否则{
var confPop=$（“#confrimedLuck”）.show（）.parent（）；
console.log（“confPop-BANG！”）；
}
var cleanAlert=setTimeout（函数（）{$（'confrimedLuck'）.hide（）}，3000）；
log（“cleanAlert已执行！”）；

问题在于，您只隐藏了在超时期间第一次调用时创建的元素（通过将其

display

属性设置为

none

），因为

getElementById

只访问第一个找到的具有指定ID的元素，所以第一个元素会被一次又一次隐藏，而另一个新创建的

confirmedLuck

div保持不变且可见

这应该起作用：

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 () {
        $('#confrimedLuck').remove(); // Completely remove the element (using jQuery) instead of just hiding it.
    }, 3000);
    console.log("cleanAlert executed!");
}

函数appendWarning（）{
//失踪
如果（！结果）{
$（“.confirmAlert”）.append（'class=“alert-alert-danger”role=“alert”>噢，天哪！出了大问题！”）；
}否则{
var confPop=$（“.confirmAlert”）.append（“×；”+rand+”）；
console.log（“confPop-BANG！”）；
}
var cleanAlert=setTimeout（函数（）{
$（“#confrimedLuck”）.remove（）；//完全删除元素（使用jQuery），而不是仅仅隐藏它。
}, 3000);
log（“cleanAlert已执行！”）；
}

如果用户手动关闭它，它是否需要消失5次？请提供一把小提琴，以便澄清您的问题。@royhowie-因此，它基本上每次都需要超时并消失，而无需退出x。它目前第一次超时，但每次警报开始堆叠在一起之后，除非您单击x删除它们。我编辑了上面的代码，因为代码是一个函数的一部分；请编辑更多的代码，使整个图片有意义。谢谢！！问题解决了@Josh BjelovukUps花了这么多时间没有重新加载，你的答案很好：）

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 () {
        $('#confrimedLuck').remove(); // Completely remove the element (using jQuery) instead of just hiding it.
    }, 3000);
    console.log("cleanAlert executed!");
}