javascript - $().html() 仅在第一次时有效

Question

我有一个页面，其中有一个 div 写着“隐藏代码” 我还有一个p，里面有东西 该 div 应该检查 p 是否可见。 如果是，它将隐藏 p 并将 div 的内容更改为“显示代码” 这只适用于第一次 我的意思是，如果 p 被隐藏，它将被显示并来回显示，但 div 的内容只会更改为“显示代码”，而不会返回到“隐藏代码” 我的代码:

<div id="toggleCode">Hide code</div>
<p id="code">
    At first this is visible
</p>

#toggleCode{
    color:red;
    background:dodgerblue;
}

$(document).ready(function(){
$("#codearea").css({"height":"15em","width":"15em","background":"gold","margin-top":"5em","border":"4px solid aqua"});

$(".ranges").change(function(){
    $tl=$("#tl").val()+"px "
    $tr=$("#tr").val()+"px "
    $bl=$("#bl").val()+"px "
    $br=$("#br").val()+"px "
    $code=$tl+$tr+$br+$bl;
    $("#codearea").css("border-radius",$code);
});
$("#toggleCode").click(
    function(){
        if ($("#code").is(":visible")){
            $("#toggleCode").html("Show code");
            $("#code").hide();
        }
        else{
            $("#toggle").html("Hide code");
            $("#code").show();
        }

    });
$("#resetCode").click(
    function () {
        $(".ranges").val(0);
        $("#codearea").css("border-radius",0);
    });

});

还有一个jsfiddle:http://jsfiddle.net/9yrjuhv4/ 有什么想法

Answer 1

替换

$("#toggle").html("Hide code");

与

$("#toggleCode").html("Hide code");

---

此外，由于 $("#code").is(":visible") 您必须等到动画完成。我建议直接将切换状态保留为 JavaScript 中的变量。