Показать/скрыть форму пароля JS

Я использую Fluent Forms и нашел этот фрагмент:


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

Он отлично работает с полем пароля, но у меня есть поле подтверждения пароля с именем att: password_1

Если я использую этот код повторно


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

Он показывает значок глаза, но изменяет первое поле пароля при нажатии, а не в поле подтверждения. Иконки глаз бота меняют первое поле пароля, а не поле подтверждения.

Что я делаю неправильно?

Пожалуйста, не добавляйте такие сообщения, как kindky regards, thankyou, help will be appreciated,thanks in advance etc.

Sunderam Dubey 09.04.2022 22:31
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
1
31
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

На первый взгляд я вижу, что когда вы получаете ".toggle-password_1", вы все еще меняете атрибуты в passField, а не в passField_1

Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 09.04.2022 22:55

Спасибо большое, теперь все работает отлично! Очень ценная помощь!

Snoepys 09.04.2022 22:59
Ответ принят как подходящий

Возможно, это потому, что вы не используете существующий класс, то есть вы указываете ему искать элемент по классу ".toggle-password_1", возможно, самое правильное - добавить к нему идентификатор и искать указанный маркировать по его идентификатору.

Поправка будет такой:

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: объект не был правильно вызван в функции, правильная ссылка "passField_1"

Я новичок в stackoverflow, надеюсь, мой ответ вам помог :)

Да, большое спасибо! Ты прав. Я забыл изменить passField.attr. Так просто, а я не мог этого увидеть. Спасибо большое!

Snoepys 09.04.2022 22:57

Ваш код хорош, но просто поместите его за кодом, который вы использовали для подтверждения кода, скрывающего пароль, потому что это происходит неоднократно и приводит к ошибке. Оба процесса полностью противостоят друг другу, что ничего не дает, и вы должны были понять, что это не соответствует коду и неправильно получает класс, что также может быть причиной.

here is the fixed version that I did which might help you: < the code you used for conformation > and

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

Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 09.04.2022 23:00

Другие вопросы по теме