【问题标题】：Javascript set timeout to bootstrap alertJavascript settimeout 引导警报
【发布时间】：2018-09-11 07:15:20
【问题描述】：

我的警报是动态创建的。

是否可以为警报分配一个功能以在 3 秒内自毁？

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">  
            <a class="close" data-dismiss="alert">×</a>
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

我使用Django 作为后端。

最终产品是这样的

<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
</div>

总结

是否可以做一个类似的超时功能

setTimeout(function(this){ $(this).remove() }, 3000);

进入标签？

【问题讨论】：

您可以做的是，在调用 JavaScript 函数后将 html 附加到 div，该函数将在 3 秒后删除该 div 的内容。你可以使用setTimeout
是的，但是否可以将其分配为像 <div class="alert alert-success" onCreate=setTimeout(function(this){ $(this).remove() }, 3000)>

标签： javascript jquery django

【解决方案1】：

一种简单但不是最优雅的方法是简单地包含一个带有脚本的小图像元素，该脚本在渲染后运行。伪造的源属性会导致 onerror JavaScript 立即执行。该样式使图像元素不会中断或改变页面呈现的方式。

这种方法更容易，因为它不需要您使用某种数据或迭代器或自定义标识符来确定需要定位哪个元素。它有点难以阅读，但它确实有效。超时设置为 500，这样您就不必等待 3 秒来测试它。

<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
    <img src="close.soon" style="display:none;" onerror="(function(el){ setTimeout(function(){ el.parentNode.parentNode.removeChild(el.parentNode); },500 ); })(this);" />
</div>

另外，既然你已经包含了 jQuery，你也可以使用这个 sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert alert-success">
    <a class="close" data-dismiss="alert">×</a>
    My message
    <img src="close.soon" style="display:none;" onerror="(function(el){ setTimeout(function(){ $(el).parent().remove(); },500 ); })(this);" />
</div>

【讨论】：

【解决方案2】：

在 alert div 的类列表中添加关键字“modal”会将其从 DOM 中移除。

所以下面是其中一种方法。提供一个 ID 选择器，然后将“模态”添加到类列表中

`<div id='myAlert' class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
My message
</div>`


setTimeout(()=>{
var alertId = document.getElementById('myAlert')
alertId.classList.add('modal')
},3000);

【讨论】：