ボタン "show password"が機能しない

Question

ドットでパスワードを表示するボタンを書いてみたいと思います。 つまり、属性「タイプ」をパスワードからテキストに変更するだけです。そのボタンを再度クリックすると、パスワードを非表示にする必要があります。

マイコード：

$(document).ready(function(){ 
    var fieldType = $('input.password').attr("type"); 

    $('.show_passwrd').on("click",function(){ 
     if(fieldType == "password"){ 
      $('input.password').attr("type","text"); 
     } 
     else{ 
      $('input.password').attr("type","password"); 
     } 
    }) 
}); 

は私がクリックしますちょうど私のブラウザですべてのエラーを持っていない、何もやります。

Answer 1

ダナは提案のように、あなたは、クリックハンドラ内FIELDTYPEをチェックする必要があります。また、セレクタに問題がある可能性もあります。 JavaScriptを動作させるために必要なHTMLを以下に示しました。

$(document).ready(function() { 
 
    $('.show_passwrd').on("click", function() { 
 
    var fieldType = $('input.password').attr("type"); 
 
    if (fieldType == "password") { 
 
     $('input.password').attr("type", "text"); 
 
    } else { 
 
     $('input.password').attr("type", "password"); 
 
    } 
 
    }) 
 
});

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

Answer 2

現在のtypeをチェックするコードをイベントハンドラに移動します。この値は、.show_passwrdがクリックされ、再計算する必要があるたびに変更されます。

jQuery(function($) { 
    $('.show_passwrd').on("click", function() { 
     var fieldType = $('input.password').attr("type"); 
     if (fieldType == "password"){ 
      $('input.password').attr("type","text"); 
     } else { 
      $('input.password').attr("type","password"); 
     } 
    }); 
}); 

注意すべきもう一つは、セレクタinput.passwordがpasswordのCSSクラスで<input>タグを探しているということです。あなたはそれがまだない場合、それを追加したり、IDによって要素を取得するために、セレクタを変更する必要があります：

<input type="password" class="password">