jquery无法改变页面内容，调用console.log($(this).html())方法显示已经改变了啊

Question

这是我的页面代码：

<span title='1' class="showpanel">点击查看</span>
<span title='2' class="showpanel">点击查看</span>
<span title='3' class="showpanel">点击查看</span>
<div id="panel" style="display:none;"></div>

<script>
    $(document).ready(function() {
        $(".showpanel").click(function(){
            if($("#panel").is(":hidden")){
                $(this).html("点击关闭");
                innerobj=$.ajax({url:"MyServlet"+"?itemId="+$(this).attr("title"),async:false});
                $("#panel").html("<section id='dg-container' class='dg-container'>"
                    +"<div class='dg-wrapper'>"
                    +innerobj.responseText
                    +"</div>"
                    +"<nav><span class='dg-prev'>&lt;</span><span class='dg-next'>&gt;</span></nav>"
                    +"</section>"
                    +"<script>");
                $("#panel").show();
            console.log($(this).attr("title"));
            }
            if($("#panel").is(":visible")){
                $("#panel").hide();
                $(this).html("点击查看");
            }
        });
    });
    </script>

我点击“点击查看”后，“点击查看”并没有改变成“点击关闭”，但是调用console.log($(this).html())在浏览器调试时是能输出正确的啊，id为panel的元素也没有在页面中显示出来。。。这咋回事啊。。。各位大侠帮帮忙

Answer 1

你逻辑上出了错误。
刚开始 if($("#panel").is(":hidden")) 这个条件成立，所以会运行以下语句：

$(this).html("点击关闭");
$("#panel").show();

此时当程序到达 if($("#panel").is(":visible")) 时，条件也成立，因为你已经修改了属性。所以

$("#panel").hide();
$(this).html("点击查看");

也会运行。所以最后的结果相当啥也没干。
请将结构改为

if() {
 ...
} 
else if() {
 ...
}

Answer 2

页面有点复杂，可以试着简化一下不相关的，只测试这一项。只测试

$(function() {
    $('.showpanel').click(function() {
        if ($("#panel").is(":hidden")) {
            $(this).html('点击关闭');
        }
    })
})

是没问题的。应该是其它代码的原因。

我简化了一下，如下应该是可以的。

将

if ($("#panel").is(":hidden")) {
    $('#panel').show();
    $(this).html('点击关闭');
}
if($("#panel").is(":visible")) {
    $('#panel').hide();
    $(this).html("点击查看");
}

改为：

if ($("#panel").is(":hidden")) {
    $('#panel').show();
    $(this).html('点击关闭');
} else {
    $('#panel').hide();
    $(this).html("点击查看");
}