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 インターフェイスが原因で問題が発生したと考えています。そのため、他の多くの人には効果がありましたが、私には効果がありませんでした。

問題は、プログラムが実行時にボタンの下にネストされた「スパン」タグをいくつか作成したため、プログラムの実行中に次のように表示されたことです。

<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 に答える