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

尝试：

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

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

Answer 3

会是这样。为您的按钮设置一个属性。例如切换。

<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 4

经过测试并具有魅力

<input type="button" id="button" value="hide menu" />
<div id='UIcontainer'>fladfl</div>

<script type="text/javascript">
$(function () {   
    $("#button").click(function() {
        var val = $(this).val();
        if(val=="hide menu") {
            $("#button").val('show menu');
        } else {
            $("#button").val('hide menu');  
        }
        $("#UIcontainer").toggle();
    });
}); 
</script>