div/js 添加和隐藏

Question

<div class="s">
<div id="s-cont" class="s-cont">
<a id="all"> <span class="s-span"></span> </a>
</div>
</div>
span中无内容时隐藏，当添加内容到span时显示div

Answer 1

<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
    <div class="s">
        <div id="s-cont" class="s-cont">
            <a id="all"> <span class="s-span"  onpropertychange="hehehe()">1</span> </a>
        </div>
    </div>
<script type="text/javascript">
    function hehehe(){//span内容变动即触发函数
        var s=$('.s-span').html();
        if(s==''){$('.s').hide()}else{$('.s').show()}
    }
</script>
    <hr><input id="t" type="text"  onKeyup="linput()">
    <script type="text/javascript">
        $(function(){
            //
        })
        function linput(){//同步为span赋值
            $('.s-span').html($('#t').val());
        }
    </script>

追问

谢谢您给我解答，很详细！

Answer 2

$(document).ready(function(){

if( !$(".s-span").text() ){
$(".s").hide();
}else{
$(".s").show();
}
})

HTML：

<div class="s" style="width:50px;height:50px;background:yellow">

    <div id="s-cont" class="s-cont">

        <a id="all"> <span class="s-span"></span> </a>

    </div>

</div>

有一点注意 span之间不要留空格，因为空格也算字符。如果有空格是默认span有内容的

本回答被提问者采纳