如何在沒有消息時隱藏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