jQuery按钮值

Question

我有一个按钮("#btnchangepass")，按钮的值为"show"。如果我单击按钮，则值必须在"hide"中更改，如果我再次单击该按钮，则值必须按照"show"中的开头更改。

我写了这段代码，但我不知道如何取回按钮的起始值。有人可以帮我一把吗？

该按钮无法隐藏，它只是按钮的值，按钮上显示的名称为hide和show。

$('#btnshowhide').click(function(){
    $("#btnshowhide").prop('value', 'hide');
});

Answer 1

如果你正在使用jQuery＆lt; 1.8使用：

$('#btnshowhide').toggle(function () {
    $("#btnshowhide").attr('value', 'hide');
}, function () {
    $("#btnshowhide").attr('value', 'show');
});

否则，如果您只想隐藏按钮并显示，请使用三元运算符：

$('#btnshowhide').click(function () {
    $(this).attr('value', $(this).attr('value') == 'hide' ? 'show' : 'hide');;
});

使用.attr()代替.prop()，因为后者主要用于布尔值。

Answer 2

您可以检查其状态并相应地更改值：

＆＃13;

＆＃13;

$('#btnshowhide').click(function () {
    if ($("#btnshowhide").val() == 'show') {
        $("#btnshowhide").prop('value', 'hide');
    } else {
        $("#btnshowhide").prop('value', 'show');
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnshowhide" value="show" />

＆＃13;

＆＃13;

＆＃13;

Fiddle

Answer 3

$('#btnshowhide').click(function() {
  $(this).val($(this).val() === 'show' ? 'hide' : 'show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="btnshowhide" value="show" />

Answer 4

只需使用hide()

即可

$('#btnshowhide').click(function(){
    $(this).hide();
});

更新：

抱歉，我不明白，所以你需要这样的东西：

JSFiddle

HTML：

<input type="submit" value="hide" id="btnshowhide" />

JS：

$(document).ready(function () {
    $('#btnshowhide').click(function () {
        if ($(this).val() === "hide") {
            $(this).val("show");
        } else {
            $(this).val("hide");
        }
    });
});

Answer 5

使用以下

$('#btnshowhide').click(function() {
  $(this).prop('value', $(this).prop('value') == 'hide' ? 'show' : 'hide');
  alert('This has val ' + $(this).prop('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnshowhide">button</button>

Answer 6

我建议使用data属性：

$('#btnshowhide').click(function(){
    var val = $(this).val();
    var newVal = "";

   if(val === "hide") {
      newVal = $(this).data("show-text");
   } else {
     newVal = $(this).data("hide-text");
   }

   $(this).val(newVal);
});