如何在没有消息时隐藏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也可能总是评估为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>

Answer 2

以下代码可以帮助您解决问题。 如果您有任何疑问，请告诉我

<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");
                }
            })

        });

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-07-27 19:09:26

解决方案2
1 2016-07-27 19:38:07

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-07-27 19:09:26

解决方案2 1 2016-07-27 19:38:07

解决方案1
1 已采纳 2016-07-27 19:09:26

解决方案2
1 2016-07-27 19:38:07