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 代码，几秒钟后警报框消失了，但没有一个不起作用：

代码 1：

<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 class 而不是 message class

将此代码放在</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>

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

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

1 个答案: