javascript - 没有消息时如何隐藏Bootstrap警告框

Question

我用这样的 Bootstrap 做了一个简单的警告框

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

当没有提示(框为空)时，框仍然像这样显示在页面上。

所以我试图在它为空时用 jquery 隐藏它像这样:

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

这基本上是说如果有警告消息，则显示该框，如果没有，则将其隐藏。但是，这并不像预期的那样工作。该框一直存在，直到没有警报为止。我该如何解决这个问题？

Answer 1

确保最初隐藏您的警告框。此外，您似乎将 JavaScript 变量直接放入 HTML 中。此外，字符串 bag.session.username 的计算结果可能始终为真。也许是这个？

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