トグルフィールドタイプの属性

Question

ここで間違っていることはわかりません。なぜ私の機能が機能していないのか疑問に思っています。パスワードの表示/非表示を切り替えようとしています。

現在、パスワードからテキストに切り替えることはできますが、パスワードに戻すことはできません。あなたが間違って見えるものは何ですか？

HTML：

<div class="form-group mbs"> 
    <label for="password" class="label-medium mbxs">Password</label><br> 
    <input type="password" name="password" class="form-control input-medium" required> 
</div> 

<div class="form-group mbs"> 
    <label for="passwordConfirm" class="label-medium mbxs">Password Confirm</label><br> 
    <input type="password" name="passwordConfirm" class="form-control input-medium mbs" required><br> 
    <a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a> 
    <a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a> 
</div> 

スクリプト：

$("#show-password").click(function(e){ 
e.preventDefault(); 
if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password')){ 
    $("input[name='password']").attr('type', 'text'); 
    $("input[name='passwordConfirm']").attr('type', 'text'); 
}else{ 
    $("input[name='password']").attr('type', 'password'); 
    $("input[name='passwordConfirm']").attr('type', 'password'); 
} 

}）。

Answer 1

if条件で属性を割り当てています。このようにそれを変更し、

$("#show-password").click(function(e) { 
    e.preventDefault(); 
    if ($("input[name='password']").attr('type') == 'password' && $("input[name='passwordConfirm']").attr('type') == 'password') { 

    $("input[name='password']").attr('type', 'text'); 
    $("input[name='passwordConfirm']").attr('type', 'text'); 
    } else { 

    $("input[name='password']").attr('type', 'password'); 
    $("input[name='passwordConfirm']").attr('type', 'password'); 
    } 
}); 

Fiddle

if($("input[name='password']").attr('type', 'password') && $("input[name='passwordConfirm']").attr('type', 'password'))は常にtrueを返します。

Answer 2

あなたがそれを比較するのではなく、属性を設定します.attrを使用している方法は、

$("#show-password").click(function(e){ 
    e.preventDefault(); 
    if($("input[name='password']").attr('type')=='password' && // Changed here 
    $("input[name='passwordConfirm']").attr('type')== 'password') 
    { 
     $("input[name='password']").attr('type', 'text'); 
     $("input[name='passwordConfirm']").attr('type', 'text'); 
    }else{ 

    $("input[name='password']").attr('type', 'password'); 
    $("input[name='passwordConfirm']").attr('type', 'password'); 
} 
}); 

Working jsfiddle

EDIT としては、彼の&私の答えに違いはありませんAnoop Joshiが指摘入力します。だから、少しはそれを

HTML

<div class="form-group mbs"> 
    <label for="password" class="label-medium mbxs">Password</label><br> 
    // Used a common class passwordToggle 
    <input type="password" name="password" class="passwordToggle form-control input-medium" required> 
</div> 

<div class="form-group mbs"> 
    <label for="passwordConfirm" class="label-medium mbxs ">Password Confirm</label><br> 
    // Used a common class passwordToggle 
    <input type="password" name="passwordConfirm" class="form-control input-medium mbs passwordToggle" required><br> 
    <a href="" id="generate-password" class="btn btn-large btn-green-gradient">Generate Password</a> 
    <a href="" id="show-password" class="btn btn-large btn-red-gradient">Show/Hide Password</a> 
</div> 

JS

$("#show-password").click(function(e){ 
e.preventDefault(); 
// Minimizing lines of code using ternary operator 
$(".passwordToggle").attr('type') == 'password'? $(".passwordToggle").attr('type','text'):$(".passwordToggle").attr('type','password') 
}); 

jsfiddle using ternary operator

Answer 3

を評価するために、三項演算子を使用し2 input type = "password" &間で共通クラスを使用することにより、修正しました必要がある.attr（ 'type'）== 'password'を使用してください。代わりに、コードの下condition.Tryで.ATTR（ 'タイプ'、 'パスワード'）の

$（ "＃ショーパスワード"）をクリックします（関数（E）{e.preventDefault（）;場合（$ attr（ 'type'）== 'password' && $（ "input [name = 'passwordConfirm']"）attr（ 'type'）== 'パスワード' attr（ 'type'、 'text'）; $（ "input [name = 'passwordConfirm']"）： attr（ 'type'、 'password'）; $（ "input [name = 'passwordConfirm']"）; attr（ 'type'、 'password'）; 'パスワード'）;}}））;