Javascript 设置超时以引导警报

Question

我的提醒是动态创建的。

是否可以为警报分配一个功能，使其在 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);

进入标签？

Answer 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，您也可以使用此代码片段:

<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>