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

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')
              ^-----------------

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并查看结果