@Kardamon90

Как разделить функцию кнопки показать/скрыть пароль на отдельные кнопки?

https://codepen.io/Kardamon90/pen/rNdZeQN
Вот такая вот простейшая форма смены пароля с 3 полями и у каждого есть свой контроллер показать/скрыть пароль. Но при нажатии на эту кнопку внутри одного поля - показывается пароль во всех полях. Помогите, как разделить эти функции так, что бы при нажатии на кнопку внутри определенного поля, отображался пароль только в одном поле
  • Вопрос задан
  • 45 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Классическая ошибка не понимания как работают селекторы.
При нажатии на кнопку нужно не все .password искать, а только те, что "рядом" с элементом, на котором произошло событие. в jQeury можно через .prev, prevAll, или наоборот взять .parent а в нём уже искать .password. Таким образом, будут искаться только те .password, которые на том же уровне что и элемент на котором был клик, либо в том же родителе, а не во всём документе.
$('body').on('click', '.password__control', function () {
    var $this = $(this)
    var $closestPass = $this.prevAll('.password')
		if ($closestPass.attr('type') == 'password') {
			$this.addClass('view');
			$closestPass.attr('type', 'text');
		} else {
			$this.removeClass('view');
			$closestPass.attr('type', 'password');
		}
		return false;
	});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
NikFaraday
@NikFaraday
Student full-stack Developer
1) Дайте каждому полю свой Id
2) Создайте две кнопки для каждого поля
3) Через JS (Лучше через jQuery) сделайте обработчик нажатия на каждую кнопку, что бы она меняла тип инпута password/text

UPD:


if ($('.password').attr('type') == 'password') {
$(this).addClass('view');
$('.password').attr('type', 'text');


Вот этот ваш код выбирает ВСЕ элементы с классом password и меняет им ВСЕМ тип на text. Если вам нужно для каждого инпута отдельно, тогда делайте выборку НЕ ЧЕРЕЗ КЛАССЫ, а ЧЕРЕЗ ID
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы