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/