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

        });

如何在没有消息

2 个答案: