javascript - Jquery 切换标签/按钮文本

Question

我有一个非常基本的切换脚本，可以正常工作，但我想切换标签，使其先显示再隐藏

我的 html 是:

    <button type="button" class="show">Show</button>
<br />
<br />
<div id="info">#info</div>
<div id="edit">#edit</div>

我的jquery是

$("#edit").hide();
$(".show").click(function(){
$("#info, #edit").fadeToggle("slow");
});

CSS 是:

#info {
 position:absolute;
 left:0px;
 background-color:green;
 width:100px;
 height:100px;   
}

#edit {
 position:absolute;
 background-color:red;
 width:100px;
 height:100px;  
}

Answer 1

添加这一行:

$('button').text($('button').text() === 'Show' ? "Hide" : "Show");

所以你的 JavaScript 看起来像这样:

$("#edit").hide(); 
$("show").click(function(){
    $("#info, #edit").fadeToggle("slow");
    $('button').text($('button').text() === 'Show' ? "Hide" : "Show");
});

该行根据当前值切换按钮文本。

此外，您的彩色框在切换时会移动一点，因为 left:0 仅在一个 DIV 上。

jsFiddle:https://jsfiddle.net/xerbefmg/