如果为空，则隐藏Bootstrap警报不起作用。

Question

我希望在Bootstrap警告框为空时隐藏它。页面加载时可以正确隐藏，但是当进行将数据插入DIV的推送操作时，它不会显示警告框并保持display = none。

HTML

 <div id="a1" class="alert alert-success">
                <div id="discussion"></div>
            </div>

JS:

<script type="text/javascript">
    hideAlert("a1");

    function hideAlert(id) {
        var text = $('#' + id + '#discussion').text();
        console.log(text.length);
        if (text.length <= 0)
            $('#' + id).hide();
    }
</script>

编辑

我尝试使用input事件，结果相同。它可以隐藏，但是当获取值时不能显示。

JS：

<script type="text/javascript">
    $('#discussion').keyup(function () {

        // If value is not empty
        if ($(this).val().length == 0) {
            // Hide the element
            $('#a1').hide();
        } else {
            // Otherwise show it
            $('#a1').show();
        }
    }).keyup();


</script>

- Ledwing

---

显示警报的代码在哪里？还是你刷新了页面？ - StudioTime

警告框没有弹出，这是我的问题。当我发布 <div id="discussion"></div> 时，获取的值为图像，但警告框不会出现 @DarrenSweeney - Ledwing

当弹出框中有文本时，您需要将display:none类从弹出框中移除。 - Aslam

@hunzaboy：嗯，是的，这正是他们说他们正在努力做的事情。你为什么要重复这个问题？ - BoltClock

Answer 1

你的选择器必须是#a1 #discussion，而不是#a1#discussion。所以： 更改为：

$('#' + id + '#discussion')

收件人:

$('#' + id + ' #discussion')
              ^-----------------

hideAlert("a1");
function hideAlert(id) {
    var text = $('#' + id + ' #discussion').text();
    console.log(text.length);
    if (text.length <= 0)
        $('#' + id).hide();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="a1" class="alert alert-success">
    <div id="discussion"></div>
</div>

更新您的问题后：

setInterval(function(){ hideAlert("a1"); }, 3000);

function hideAlert(id) {
    var text = $('#' + id + ' #discussion').text();
    if (text.length <= 0)
    $('#' + id).hide();
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="a1" class="alert alert-success">
    <div id="discussion" contenteditable="true">Some Text...</div>
</div>

注意：删除 div 中的文本后查看结果

- Ehsan

---

我有一个问题，它仍然正确地隐藏，问题是当讨论获取值时我没有刷新页面，我需要做什么来使div始终监听？ - Ledwing

@Ledwing，如何获取div的值？如果div是可编辑的，并且您在其中键入值，则使用input事件。 - Ehsan

它从推送通知中获取值，因此我不需要重新加载页面或执行任何操作来获取该值。您所说的输入事件是什么意思？ - Ledwing

Answer 2

为什么不尝试使用:empty伪类，像这样：

CSS

#discussion{
    display: block;
}     
#discussion:empty{
    display: none;
}

HTML

<div id="discussion" class="alert alert-success"></div>

注意: 伪类需要开始和结束标记紧挨着（就像上面HTML中的开始和结束`div`标记没有任何换行或空格一样），才能起作用。

- Parthipan Natkunam