Django如何在几秒钟后消失引导警报框消息

Question

在发布此问题之前，我在 stackoverflow 上发现了一些解决方案并尝试了但没有一个不起作用。我希望消息在 2 或 3 秒后消失。这是我的代码：

 {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                    <div class="alert alert-danger" role="alert">
                    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                    {% endfor %}
                    </div>
                </ul>
 {% endif %}

看起来像这样：

下面给出了几个我尝试过的 JavaScript 代码，几秒钟后警报框消失了，但没有一个不起作用：

code1：

<script text="javascript">
    setTimeout(fade_out, 3000);
    function fade_out() {
        $(".messages").fadeOut().empty();
    }
    
 
</script>

code2

<script>
    $(document).ready(function() {
        // messages timeout for 10 sec 
        setTimeout(function() {
            $('.message').fadeOut('slow');
        }, 10000); // <-- time in milliseconds, 1000 =  1 sec

        // delete message
        $('.alert').live('click',function(){
            $('.alert').parent().attr('style', 'display:none;');
        })
    });
</script>

code3

<script>
setTimeout(function() {
    $('.messages').fadeOut('fast');
}, 30000); // <-- time in milliseconds
</script>

code4

<script>setTimeout(function(){$('.messages').fadeOut();}, 15000);</script>

我不明白为什么上面的代码不起作用？我哪里做错了？

Answer 1

代码 2 是正确的，只是您的代码中有拼写错误，请使用 messages 类而不是 message 类

将此代码放在</body>之前

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(document).ready(function() {
        // messages timeout for 10 sec
        setTimeout(function() {
            $('.messages').fadeOut('slow');
        }, 10000); // <-- time in milliseconds, 1000 =  1 sec
    });
</script>

我自己测试了这段代码，它运行良好