javascript - jqueryで表示/非表示を切り替える

Question

jquery を使用して、2 つの要素の表示/非表示を切り替える必要があります。ボタンをクリックすると「テキストを非表示」にして「テキストを表示」に変更し、ボタンをクリックするとテキストが表示から非表示に切り替わるようにします。これを一度変更する必要がありますが、元に戻す方法やトグルする方法がわかりません。

$(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

現在の状態を変数に保存し、その変数に基づいて要素を表示または非表示にし、ボタンのテキストを変更します。

HTML

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

ジャバスクリプト

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";
    }
}