Jquery 切换 label/button 文本

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/

Jquery 切换 label/button 文本

Jquery toggle label/button text

html

javascript

css

jquery

toggle