javascript - ボタンの値を切り替える簡単な方法

Question

タイトルにあるように、ユーザーにボタンをクリックして新しい値を取得してもらいたいのです。この場合、メニューを非表示から表示に切り替えたり、前後に切り替えたりするボタンです。これが私のコードです。

「メニューを表示」「メニューを非表示」と表示させたい

今クリックすると、メニューが開き、新しい値が設定され、メニューを閉じることができますが、値は元に戻りません。

jquery:

$(function () {   
$("#UIcontainer").hide();

$("#button").click(function() {
$("#UIcontainer").toggle( function() {
    $("#button").val('hide menu');
});
  });
}); 

Answer 1

$(function () {   
    $("#UIcontainer").hide();

    $("#button").on('click', function() {
        $("#UIcontainer").toggle();
        this.value = this.value == 'hide menu' ? 'show menu' : 'hide menu';
    });
}); 

フィドル

Answer 2

このようになります。ボタンに属性を設定します。たとえばトグル。

<input type="button" toggle="show">


$(function () {   

    $("#button").click(function() {
        if ($this.attr("toggle")=="show"){
            $("#UIcontainer").show();
            $this.attr("toggle")="hide"
        }
        else{
            $("#UIcontainer").hide();
            $this.attr("toggle")="show"
        }
    });

});

Answer 3

試す：

$(function () {   
$("#UIcontainer").hide();

$("#button").click(function() {
$("#UIcontainer").toggle();
$(this).val($(this).val() == "hide menu" ? "show menu" : "hide menu");
  });
});