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 中的变量。