如果空无效则隐藏引导警报

Question

如果它是空的，我想隐藏我的引导警报。它在页面加载时正确隐藏，问题是当我执行推送时将数据插入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 event尝试，它发生了同样的事情。它隐藏但在获取值时不显示

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>

Answer 1

您的选择器必须为#a1 #discussion否#a1#discussion。所以：

更改

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

要

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新您的问题之后：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：删除div中的文字并查看结果

Answer 2

为什么不尝试使用：empty css伪类，如下所示：

CSS

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

HTML

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

注意：开始和结束标记应该彼此相邻，以便伪类可以工作（比如开始和结束div标签彼此相邻，没有任何换行符或空格上面显示的HTML。）