我遇到了一个奇怪的问题，我无法使用jQuery更改按钮的显示文本。 这个想法是能够在密码<=>文本之间切换一个字段，并带有一个关联的按钮，其文本在"显示"和"隐藏"之间切换。

这是按钮：

<input type="button" id="login-form-showchars" value="Show" onclick="showCharsClicked();"/>

这是showCharsClicked函数：

function showCharsClicked() {
var passwordField = document.getElementById("login-form-password");
if (passwordField.type == "password") {
    passwordField.type = "text";
    //TODO: change text of button to 'Hide'
} //if
else {
    passwordField.type = "password";
    //TODO: change text of button to 'Show'
} //else
passwordField.value = value;
} //showCharsClicked

该函数有效，但无论我在 TODO 区域中插入什么代码，按钮上的文本都保持不变。 我已经尝试了以下所有"输入"和"按钮"类型：

document.getElementById('login-form-showchars').value = 'Hide';
$("#login-form-showchars").prop('value', 'Hide');
$("#login-form-showchars").html('Hide');
$("#login-form-showchars").attr('value', 'Hide');
$("#login-form-showchars").val('Hide');
$("#login-form-showchars").text('Hide');

有谁知道可能出了什么问题？ 通过检查按钮，我看到它的值正在发生变化，但这种变化从未在视觉上反映出来。

谢谢！

====

===================================

编辑：我找到了一种方法来让它工作，并想我会在这里记录下来供后人使用。 感谢您的所有回答，我现在认为问题是由于我的程序使用的特定 jQuery 接口引起的;这就是为什么它对许多其他人有效，但对我不起作用。

问题在于程序在运行时在按钮下方创建了一些嵌套的"span"标签，因此在程序执行期间它看起来像这样：

<a data-role="button" href="#" id="login-form-showchars" data-theme="v" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-v" data-transition="pop" data-direction="reverse">
  <span class="ui-btn-inner ui-btn-corner-all">
     <span class="ui-btn-text">Hide</span>
  </span>
</a>

当我尝试编辑按钮的值时，真正需要更改的是按钮的"span class="ui-btn-text"标签中的文本。

我将按钮声明更改为：

<a data-role="button" href="#" id="login-form-showchars">Show</a>

以及函数内部的命令：

$("#login-form-showchars .ui-btn-text").text("Hide");

这工作得很好。 希望这有助于某人不必经历我所做的事情！

$('#login-form-showchars').on('click', function() {
  var target = $('#login-form-password'),
      $this = $(this);
  target.attr('type', function(i, oldType) {
     this.type = oldType == 'password' ? 'text' : 'password';
     $this.val(this.type == 'text' ? 'Hide' : 'Show');
  });
});

$('#login-form-showchars').click(
    function(e){
        var typ = $('#inp').attr('type');
        $('#inp')[0].type = typ === 'password' ? 'text' : 'password';
        this.value = (typ === 'password' ? 'Hide' : 'Show');
    }
)​;