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

Question

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

3

我使用Bootstrap制作了一个简单的提示框，就像这样。

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

当没有警告时（框为空），框仍然像这样显示在页面上。

。

因此，我尝试使用{{link2：jquery}}来隐藏它，如下所示：

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

这基本上是说如果有警报消息，则显示框，否则隐藏它。然而，这并没有按预期工作。该框一直存在，直到没有警报为止。我该如何解决这个问题？

- OneMoreQuestion

2

这个 bag.session.username 是从哪里来的？ - Jack Guy

略微偏题：在你的HTML中，你是想打印出一些名为bag.session.username的JS变量吗？因为你所得到的只是文本bag.session.username。 - WillardSolutions

有趣的是他的框是空的，它应该包含 bag.session.username。 - Marko Mackic

对于我的应用程序，有时用户名可以是空字符串，因此检查它是否未定义的解决方案解决了我的问题。谢谢@MarkoMackic。 - OneMoreQuestion

@OneMoreQuestion，这是错误的，朋友，未定义的变量不应该出现在应用程序中，你可以将其初始化为null或''，然后进行安全检查。 - Marko Mackic

@MarkoMackic 我同意，会尝试改变这个。 - OneMoreQuestion

2个回答

1

以下代码应该能帮助你解决问题。如果有任何问题，请告诉我。

<style>
        .foo{
            display: none;
        }
</style>

HTML和JS将会。

<body>
    <div class="alertBox">
        <span role="alert" class="alert alert-info"></span>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("span.alert").each(function(){
                if(!$(this).text().trim().length){
                    $(".alertBox").addClass("foo");
                }
            })

        });

- ankurJos

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike · Accepted Answer

确保最初隐藏您的警报框。同时，看起来您正在将JavaScript变量直接放入HTML中。此外，字符串bag.session.username可能始终评估为true。也许是这样的？

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