Siempre es importante saber cual es el valor de tus variables.
Hagamos un console.log()
a tu variable estatus
para ver qué valor tiene cada vez que hagamos clic a tu ícono:
$(document).ready(function() {
$('.navbutton').click(function () {
var control = $(this);
var estatus = control.data('activo');
console.log(estatus);
$(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye ').toggleClass('fa-light fa-eye-slash');
if (estatus == true) {
$("#password").attr('type', 'password');
}
else {
$("#password").attr('type', 'text');
}
});
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>
<input id="password" type="password" placeholder="Escribe tu contraseña" />
<p class="navbutton" data-activo="false">
<i class="fa fa-light fa-eye fa-2x "></i>
</p>
Si te das cuenta, el valor de tu variable siempre es false
, por la cual siempre está ingresando al else
, cambiando el atributo de tu input a texto, o sea, esto se debe a que el valor de tu variable nunca cambia.
Entonces, se me ocurre cambiar el valor de la variable cada vez que le hagamos clic al ícono, así indicamos que el valor va a actualizarse cada vez que se ingrese al evento. Entonces, podemos agregar esto al final del evento para que el valor se actualice cada vez que entre a tu evento:
control.data('activo', !estatus);
Para que se entienda mejor qué hace esto, te doy un ejemplo: Mira que al principio, tu valor es false
y entra al else
, luego cambio ese valor a true
, diciendo que la siguiente vez que ingrese al evento será true
(porque lo cambié a true
antes) y así entra al if
, y luego ese true
se cambia a false
, e indico que en la siguiente será false
y así entra al else
, sucesivamente (espero me logre entender).
Código:
$(document).ready(function() {
$('.navbutton').click(function () {
var control = $(this);
var estatus = control.data('activo');
console.log(estatus);
$(this).find('.fa-eye,.fa-eye-slash').toggleClass('fa-eye ').toggleClass('fa-light fa-eye-slash');
if (estatus == true) {
$("#password").attr('type', 'password');
}
else {
$("#password").attr('type', 'text');
}
control.data('activo', !estatus);
});
});
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/4d529f15e3.js" crossorigin="anonymous"></script>
<input id="password" type="password" placeholder="Escribe tu contraseña" />
<p class="navbutton" data-activo="false">
<i class="fa fa-light fa-eye fa-2x "></i>
</p>