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

Question

[Kardamon90]

https://codepen.io/Kardamon90/pen/rNdZeQN
Вот такая вот простейшая форма смены пароля с 3 полями и у каждого есть свой контроллер показать/скрыть пароль. Но при нажатии на эту кнопку внутри одного поля - показывается пароль во всех полях. Помогите, как разделить эти функции так, что бы при нажатии на кнопку внутри определенного поля, отображался пароль только в одном поле

Answer 1

[Вадим]

Классическая ошибка не понимания как работают селекторы.
При нажатии на кнопку нужно не все .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;
	});

Answer 2

[Nik Faraday]

1) Дайте каждому полю свой Id
2) Создайте две кнопки для каждого поля
3) Через JS (Лучше через jQuery) сделайте обработчик нажатия на каждую кнопку, что бы она меняла тип инпута password/text

UPD:

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

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

Comments

[Вадим]

И что, будете на каждую кнопку писать свой обработчик, который будет по id находить элемент?
А если кнопок не 100, а хотя бы 20? 20 функций будете руками писать?

[Nik Faraday]

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