Estoy usando Fluent Forms y he encontrado este fragmento:
passField.wrap("<div class='ff_input-group'></div>"); passField.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>'); $form.find(".toggle-password").click(function() { $(this).toggleClass("dashicons-visibility dashicons-hidden"); if (passField.attr("type") == "password") { passField.attr("type", "text"); } else { passField.attr("type", "password"); } });Funciona perfectamente con el campo de contraseña, pero tengo un campo de confirmación de contraseña con el nombre de att: contraseña_1
Si uso este código repetidamente
passField_1.wrap("<div class='ff_input-group'></div>"); passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </i></span></div>'); $form.find(".toggle-password_1").click(function() { $(this).toggleClass("dashicons-visibility dashicons-hidden"); if (passField.attr("type") == "password") { passField.attr("type", "text"); } else { passField.attr("type", "password"); } });Muestra el icono del ojo pero cambia el primer campo de contraseña al hacer clic, no en el de confirmación. Los iconos de ojos de bot cambian el primer campo de contraseña, pero no el de confirmación.
¿Que estoy haciendo mal?
Por lo que puedo ver a primera vista, cuando obtiene ".toggle-password_1" todavía está cambiando los atributos en passField y no en passField_1
Quizás sea porque no estás usando una clase existente, es decir, le estás diciendo que busque un elemento por la clase ".toggle-password_1", quizás lo más correcto sea agregarle un ID y buscar dicho etiqueta por su ID.
La corrección sería tal que:
passField_1.wrap("<div class='ff_input-group'></div>"); passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i id=¨confirmPass¨ style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password"> </i></span></div>'); $form.find("#confirmPass").click(function() { $(this).toggleClass("dashicons-visibility dashicons-hidden"); if (passField_1.attr("type") == "password") { passField_1.attr("type", "text"); } else { passField_1.attr("type", "password"); } });Pdt: El objeto no fue llamado correctamente en la función, la referencia correcta es "passField_1"
Soy nuevo ayudando en stackoverflow, espero que mi respuesta te haya ayudado :)
Su código es bueno, pero simplemente colóquelo detrás del código que usó para confirmar el código detrás de ocultar la contraseña porque sucede repetidamente y obtiene el error. Ambos procesos se oponen por completo, lo que no hace nada y debería haberse dado cuenta de que no se ajusta al código y no obtiene la clase correctamente, lo que también podría ser el motivo.
aquí está la versión corregida que hice que podría ayudarlo: <el código que usó para la conformación> y
passField_1.wrap("<div class='ff_input-group'></div>"); passField_1.after('<div class="ff_input-group-append"><span class="ff_input-group-text"><i style="cursor:pointer;" class="dashicons dashicons-hidden toggle-password_1"> </i></span></div>'); $form.find(".toggle-password_1").click(function() { $(this).toggleClass("dashicons-visibility dashicons-hidden"); if (passField.attr("type") == "password") { passField.attr("type", "text"); } else { passField.attr("type", "password"); } });