javascript - ボタンのタイトルを切り替える

Question

HTML ボタンがあり、別の div ではなく別の div が表示されます。

ボタンのテキストを切り替えるだけです。

<input id="blueButton" type="button" value="+ Add a new Team" onclick="
 $('#blueButton').prop('value', 'Hide'); 
 $('#teams').toggle('slow');
 $('#add_block').toggle('slow');">

ボタンのテキストを非表示から元のタイトルに再度変更する必要があります。+ Add a new Team

ボタンのタイトルを+ Add a new Team クリックすると、ボタンのタイトルが変わりhide、ボタンをもう一度クリックすると、再び変わります+ Add a new Team。

前もって感謝します。

score 2 · Accepted Answer

$('#blueButton').val(function(_, value) {
    return value === 'hide' ? '+ Add a new Team' : 'hide' 
});

score 2 · Accepted Answer

$("#blueButton").toggle(
    function(){
        $(this).val("hide");
    }, 
    function(){
        $(this).val("+ Add a new Team");
    }
);

ワーキングデモ

score 1 · Accepted Answer

これを試して：

$('#blueButton').click(function() {
    if ($(this).val() == "+ Add a new Team") { 
        $(this).val("Hide")
    } else { 
        $(this).val("+ Add a new Team")
    }
});

編集:未定義は私と同じことを言ったが、より良い、彼の:Pを使用する

score 0 · Accepted Answer

$('#teams').toggle('slow', function() {
    // アニメーションの完了。
    //ここでボタンのテキストを変更
    $('#blueButton').prop('値', '表示');
  });

これはあなたが必要とする正確なコードではないかもしれませんが、トグルが完了した後に何かを行うために使用できるコールバック関数を持つことができるというヒントを与えることができます.

score 0 · Accepted Answer

ここにjsfiddleがあります

jQ

$("#blueButton").live("click", function() {
    $(this).val() == "+ Add a new Team" ? $(this).val("hide") : $(this).val("+ Add a new Team");
});

javascript - ボタンのタイトルを切り替える

5 に答える 5

Related

Reference