javascript - 使用 jquery 切换显示/隐藏

Question

我需要使用 jquery 来切换两个元素以显示/隐藏。我希望按钮在单击时说“隐藏文本”并更改为“显示文本”，当然我希望文本在单击按钮时从显示切换到隐藏。我有一次可以更改它，但我不知道如何将其更改回来或使其切换。

$(function() {
    $('button#1').click(function() {
        $('#one').fadeOut();
    });

    $('button#1').click(function() {
        $('button#1').html('Show Text');
    });
});

Answer 1

http://jsfiddle.net/fwdzm/1/

使用切换回调！

$(function() {
    var $btn1 = $('button#1').click(function() {
        $('#one').toggle('slow', function () {
            if ($(this).is(':visible')) {
                $btn1.html('Hide Text');
            } else {
                $btn1.html('Show Text');
            }
        });
    });
});

Answer 2

$('button#1').click(function() {
    var $btn = $(this);
    $('#one').toggle('slow', function() {
       if ($(this).is(':visible')) {
          $btn.text('Hide');
       } else {
          $btn.text('Show Text');
       }
    });
});

Answer 3

尝试这样的事情

$(function() {
  $('button#1').click(function(){
    if ($('#one').is(':visible')) {
      $('#one').fadeOut();
      $(this).html('Show Text');
    } else {
      $('#one').fadeIn();
      $(this).html('Hide Text');
    }
  });
});

Answer 4

将当前状态保存在变量中，然后根据该变量显示或隐藏元素并更改按钮上的文本。

HTML

<button id="toggleBtn" type="button">Hide Text</button>
<span id="element">Your text is here</span>

JAVASCRIPT

var status = "shown";

function toggleElement() {
    if (status == "shown") {
        $('#element').hide();
        $("#toggleBtn").html('Show Text');
        status = "hidden";
    } else {
        $('#element').show();
        $("#toggleBtn").html('Hide Text');
        status = "shown";
    }
}