Pourquoi la visibilité de mon mot de passe JQuery Toggle ne fonctionne-t-elle pas?

Question

<p class="input-group pwdField"> 
    <input type="password" name="password" placeholder="Enter your Password" required> 
    <i class="fa fa-eye"></i> 
</p> 

Ceci est mon balisage HTML et mon code jquery est comme ci-dessous.

$(function() { 

    $(".input-group").children("i").click(function() { 

     $(this).toggleClass("fa-eye fa-eye-slash"); 

     var inputField = $(".pwdField").children().first(); 

     if ($(inputField).attr("type", "password")) { 

      $(inputField).attr("type", "text"); 

     } else { 
      $(inputField).attr("type", "password"); 
     } 

    }); 

}); // End of document.ready(); 

S'il vous plaît aidez-moi, quand je suis cliquant sur l'icône de l'oeil dans le champ de saisie, everythng fonctionne parfaitement mais quand je clique à nouveau, le champ d'entrée ne change pas son attribut retour à type = « mot de passe » de typee = "text"

Answer 1

vous êtes réglage l'attribut dans la if() ne obtenir il vous pouvez donc vérifier sa valeur

Essayez plutôt faire quelque chose comme:

// get the attribute value 
var type = $(inputField).attr("type"); 
// now test it's value 
if(type === 'password'){ 
    $(inputField).attr("type", "text"); 
}else{ 
    $(inputField).attr("type", "password"); 
} 

Notez la différence ... vous définissez lorsque le deuxième argument est fourni et obtenir quand il est