Mi objetivo es crear una función para alternar la visibilidad de la contraseña. El problema es que en el mismo Doc tengo 3 entradas diferentes que también necesito la función de alternancia de visibilidad, aunque estas entradas no están relacionadas con la contraseña.
Probé con el atributo de nombre, pero me pareció demasiado complicado, ya que tenía nombres para cada ícono y entrada. No tengo idea de qué usar para hacer la función, y sé que debe haber una manera más fácil.
<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> @Html.PasswordFor(m => m.Password, new { @class = "form-control", maxlength = 50 })Puede agregar un controlador de eventos en cada elemento fa-eye para alternar la opacidad de su siguiente elemento si es una input .
Y no habría nada que cambiar en su llamada al método de extensión de la maquinilla de afeitar.
$(".fa-eye").on("click", function(){ let nextInput = $(this).next("input"); let visibility = nextInput.css("opacity") == "1" ? 0 : 1; $(this).next("input").css("opacity", visibility) }) <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password" name="Password" type="password" class="form-control" maxlength="50" value="" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password2" name="Password2" type="password" class="form-control" maxlength="50" value="" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password3" name="Password3" type="password" class="form-control" maxlength="50" value="" /><br>EDITAR
Soy bastante lento esta noche... ¡Pasó tiempo antes de que descubra lo que quieres, incluso si es obvio! ¡Echa un vistazo ahora!
$(".fa-eye").on("click", function(){ let nextInput = $(this).next("input"); let visibility = nextInput.attr("type") == "password" ? "text" : "password"; nextInput.attr("type", visibility) }) <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password" name="Password" type="password" class="form-control" maxlength="50" value="Abc_123" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password2" name="Password2" type="password" class="form-control" maxlength="50" value="My_Password" /><br> <i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i> <input id="Password3" name="Password3" type="password" class="form-control" maxlength="50" value="Pr!vat3" /><br>