jquery - 如何在单击时切换 DOM 元素的文本

Question

正如标题所说，我对 JQuery 编程相当陌生。这是我设置的一个小测试 JSFiddle：

http://jsfiddle.net/LQNmK/10/

 $(document).ready(function () {

     $("#testing1").show();
 });

 $(".testbutton").live("click", function () {
     $("#testing1 p").toggle("showorhide");
 });

在这里，我基本上是在做一个 showorhide 或一个 div。

我的问题是我希望按钮在隐藏时显示显示，反之亦然。什么是一个很好的简单方式来显示这个？

Answer 1

最简单的方法是检查内容是否可见：

$(document).on("click", ".testbutton", function(ev) {
    var content = $("#testing1 p");
    content.toggle("showorhide");
    var text = content.is(":visible") ? "hide" : "show";
    $(this).val(text);
});

请注意，我已更改（弃用）live为on.

Answer 2

你可以这样做：

 $(".testbutton").on("click", function () {
     $("#testing1 p").toggle("showorhide");
     $(".testbutton").text($('#testing1 p').is(':visible') ? 'Hide' : 'Show');
 });

正如所指出的，使用“on”而不是“live”，因为它已从当前版本的 jQuery 中删除

Answer 3

采用

var status = $("#testing1 p").is(":visible");
var btn  = $(".testbutton");
if(status === true) {
  btn.attr('value','hide');
} else {
btn.attr('value','show');
}

更新小提琴：http: //jsfiddle.net/LQNmK/20/

Answer 4

我的建议是使用两个按钮，默认情况下隐藏.toggle()一个，单击其中一个按钮时它们都隐藏。这使您可以更轻松地调整您希望任一按钮向用户显示的方式——只需更改 HTML，而无需理会 JavaScript。

HTML：

<input class="testbutton btn" type="button" value="Hide"/>
<input class="testbutton btn" style="display:none" type="button" value="Show"/>

JS：

 $(".testbutton").on("click", function () {
     $('.testbutton').toggle(); // flip them both
     $("#testing1 p").toggle("showorhide");
 });

http://jsfiddle.net/mblase75/UeuQm/

Answer 5

  $(".testbutton").live("click", function () {
     $("#testing1 p").toggle("showorhide",function(){
         $(".testbutton").val($("#testing1 p").is(':visible')?'Hide':'Show');
     });
 });

http://jsfiddle.net/LQNmK/24/

Answer 6

我个人建议：

$("#testing1").show();

$(".testbutton").on("click", function () {
    $(this).val(function (i, v) {
        return v.toLowerCase() == 'show' ? 'Hide' : 'Show';
    });
    $('#testing1 p').toggle();
});

JS 小提琴演示。