如何在没有消息时隐藏Bootstrap警报框 [英] How to hide Bootstrap alert box when no message

问题描述

我用这样的Bootstrap制作了一个简单的警报框

I made a simple alert box with Bootstrap like this

<div class="alertBox">
     <span role="alert" class="alert alert-info"> bag.session.username </span>
</div>

当没有警报（框为空）时，该框仍然显示在页面上。

When there is no alert (box is empty), the box still shows on the page like this.

所以我试图用 jquery 如下：

<script type="text/javascript">
$(document).ready(function () {
    if (bag.session.username) {
        $(".alertBox").show();
    }
    else {
        $(".alertBox").hide();
    }
});
</script>

这基本上表示如果有警告信息，则显示该框，如果没有，则隐藏它。但是，这不能按预期工作。盒子在那里直到没有警报。我该如何解决这个问题？

This basically says if an alert message is there, show the box, if not, hide it. However, this does not work as expected. The box is there until there is no alert. How can I solve this?

推荐答案

确保最初隐藏你的警告框。此外，您似乎将JavaScript变量放入HTML中。字符串bag.session.username也可能总是评估为true。也许这个？

Make sure to initially hide your alert box. Also it looks like your putting a JavaScript variable right into your HTML. Also the string bag.session.username may always evaluate to true. Maybe this?

<script type="text/javascript">
$(document).ready(function () {
    if (typeof bag.session.username != "undefined") {
        $(".alertBox span").text(bag.session.username);
        $(".alertBox").show();
    }
    else {
        $(".alertBox").hide();
    }
});
</script>

这篇关于如何在没有消息时隐藏Bootstrap警报框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！