2

我遇到了一个奇怪的问题，我无法使用 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");

这很好用。希望这可以帮助某人不必经历我所做的事情！

4

3 回答 3

2

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

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

确切的演示显示/隐藏密码 + 切换按钮文本以显示/隐藏
源| 演示

浏览器问题？

于 2012-05-16T17:23:43.933 回答
1 
$('#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');
  });
});

工作演示

于 2012-05-16T17:24:40.693 回答
0

这会是你想要的吗？

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

于 2012-05-16T17:25:23.983 回答