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

Question

我遇到一个奇怪的问题，我无法使用jQuery更改按钮的显示文本。我们的想法是能够在密码＆lt; =＆gt;文本之间切换一个字段，其中一个关联按钮的文本在“显示”和“隐藏”之间切换。

这是按钮：

<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");

这很好用。希望这可以帮助别人不必完成我的工作！

Answer 1

使用

似乎可以正常使用您的代码

document.getElementById('login-form-showchars').value = 'Hide'; document.getElementById('login-form-showchars').value = 'Show';

精确演示显示/隐藏密码+切换按钮文本以显示/隐藏
source | demo

浏览器问题？

Answer 2

$('#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');
  });
});

<强> Working Demo

Answer 3

这会是你想要的吗？

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

请参阅此jsfiddle

更改按钮文本jQuery

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

3 个答案: