2016-04-13 11 views
0

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

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

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

})。

+0

@RoryMcCrossan、私はあなたができないとは思っていません.. https://jsfiddle.net/rayon_1990/53Lks4s5/ – Rayon

+0

@RoryMcCrossan、それは可能です。 –

+1

あなたは正しいです。特定のセキュリティブロックが解除されたようです。 –

答えて

3

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を返します。

+0

甘い!まさに私が探していたもの! –

+0

@TaylorFosterあなたは答えとしてそれを受け入れることができますか? –

+0

upvoteを与えて、 –

1

あなたがそれを比較するのではなく、属性を設定します.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

+0

をチェックしてください。両方の答えの違いは何ですか? –

+0

@Anoop Joshi 私はあなたがそれに答えてくれたことを知らなかった、おそらくあなたがjsfiddleで書いていたときにそれを終えました。 – brk

1

を評価するために、三項演算子を使用し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'); 'パスワード');}}));