Как можно проапгрейдить скрипт?

Question

[Павел Воронюк]

Помогите "проапгрейдить" данный скрипт:

$('#input-1').on('keyup',function(){
		  var $this = $(this),
			  val = $this.val();

		  if(val.length >= 1){
			$('.label-text').addClass('label-text-active');
		  }else {
			$('.label-text').removeClass('label-text-active');
		  }
		});

Есть форма:

<form action="">
						<div class="thumb">
							<input id="input-1" type="text" placeholder="" required autofocus />
							<label for="input-1">
								<span class="label-text">Company Name</span>
								<span class="nav-dot"></span>
							</label>
						</div>
						<div class="thumb">
							<input id="input-2" type="email" placeholder="" required autofocus />
							<label for="input-2">
								<span class="label-text">Email</span>
								<span class="nav-dot"></span>
							</label>
						</div>
                                                ....
					</form>

Input-ов есть скажем 6 штук.

<input id="input-*" />

Я проверяю на наличие текста, и если текст есть добавляю класс.

Хотелось бы правильно написать скрипт, чтобы он понимал маску какие Input-ы нужно проверять в независимости от названия id чтобы не писать 6 раз -

$('#input-1').on('keyup',function(){
...
});

...

$('#input-6').on('keyup',function(){
...
});

и правильно написать функцию проверки на наличие текста:

if(val.length >= 1){
	$('.label-text').addClass('label-text-active');
 }else {
	$('.label-text').removeClass('label-text-active');
}

используя .toggleClass()

Answer 1

[0xD34F]

Вместо .label-text переключайте класс у максимально дальних не общих предков input'ов, т.е., у .thumb. Соответственно, стилизовать надо будет не .label-text.класс, а .класс .label-text. Зачем делать именно так? Потому что не придётся переписывать js-код, если вдруг вам завтра захочется кроме .label-text стилизовать ещё что-то, или решите изменить взаимное расположение элементов.

Где input'ы находятся, что за input'ы, какой класс надо переключать:

const containerSelector = '.thumb';
const inputSelector = 'input[id^="input-"]';
const activeClass = 'active';

Переключать класс можете по-прежнему с помощью jquery:

$(containerSelector).on('input', inputSelector, function(e) {
  $(e.delegateTarget).toggleClass(activeClass, !!this.value);
});

А можете начать осваивать чистый js:

const onInput = ({ target: t, currentTarget: ct }) =>
  t.matches(inputSelector) && ct.classList.toggle(activeClass, !!t.value);

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('input', onInput);
});

Comments

[Павел Воронюк]

Научите писать java-script :D