摘要

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

尽管不是最优雅的方法，一种简单但简单的方法是仅包含一个小的图像元素，并带有一个一旦渲染便运行的脚本。伪造的source属性使onerror JavaScript立即执行。样式使image元素不中断或改变页面的呈现方式。

这种方法比较容易，因为它不需要您使用某种数据或迭代器或自定义标识符来确定需要定位的元素。有点难以阅读，但确实可以。超时设置为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>

Answer 2

将关键字“模式”添加到警报div的类列表中会将其从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);

Javascript将超时设置为引导警报

摘要

2 个答案: