Как сделать onFocus, если объектов несколько?
Здравствуйте. Есть вот такое на jquery
$(".form-input").focus(function() {
$(this).siblings('label').addClass('active');
});
$(".form-input").focusout(function() {
if ($(this).val() != false) {
$(this).siblings('label').addClass('active');
} else {
$(this).siblings('label').removeClass('active');
}
});
Оно работает, как часы, но мне надо на чистом JavaScript. Я написала это, но оно работает только с первым элементом. Form-input у меня несколько.
function q(e){return document.querySelector(e);}
q(".form-input").onfocus = function() {
this.nextElementSibling.classList.add("active");
};
q(".form-input").onblur = function() {
if (this.value != false) {
this.nextElementSibling.classList.add("active");
} else {
this.nextElementSibling.classList.remove("active");
}
};
подскажите, как сделать, чтобы класс добавлялся ко всем нажимаемым элементам |
document.querySelectorAll(".form-input").forEach(
el => { el.onfocus = function() {
this.nextElementSibling.classList.add("active");
};
el.onblur = function() {
if (this.value != false) {
this.nextElementSibling.classList.add("active");
} else {
this.nextElementSibling.classList.remove("active");
}
}
}
);
|
voraa, а если 7-11 заменить на classList.toggle ?
|
Цитата:
Там же добавление/удаление класса у следующего элемента идет не в зависимости от его наличия, а в зависимости от значения текущего элемента. |
Цитата:
|
Цитата:
|
Цитата:
По мне toggle должна делать toggle, а для add и remove есть другие функции. Так код понятнее |
Цитата:
a += b + c a += b + c a += b + c .... сколько нужно, это понятнее. :) |
Есть функция функция appendChild(node), а чего бы ей не прикрутили еще один параметр, что бы она могла удалять элемент?
а.appendChild(b) - добавляет элемент а.appendChild(b, false) - удаляет элемент Удобно же. |
Удобно, только имя функции в данном случае иное было бы как минимум.
Не всегда используют тернарный оператор тоже ссылаясь на "непонятки". А чего в нем непонятного, все просто и лаконично. Это уже привередливость, а не доводы. А если не хочется и ладно, но ведь и борщ не обязательно любят все, но это не значит, что он как блюдо не имеет право на существование. :) |
Цитата:
Есть как бы три действия. add, remove, toggle. Если с помощью последнего можно делать все, то какой смысл в существовании первых двух? Цитата:
Много чего есть, но это не значит, что этим надо пользоваться. Я тут недавно разбирал и переделывал старый код на паскале. Я ошалел от with. Кому то это было удобно. А with вроде еще и javascript остался. Правда не помню, что бы им кто то пользовался. Неужели кому то этот оператор неудобен и непонятен :) |
подскажите, а как узнать через this, на какой по счёту элемент нажал человек?
qs(".form-input").forEach(el => {
el.onclick = function(){
console.log(this.........);
}
});
|
nastya97core,
qs(".form-input").forEach((el, i)=> {
el.onclick = function(){
console.log(i);
}
});
|
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
:write:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.form-input:focus+label, .form-input.active+label{
color: #FF00FF;
}
.form-input+label {
color: #FFFFFF;
}
</style>
<script>
addEventListener("blur", ({target}) => {
if(target.closest && target.closest(".form-input")) target.classList.toggle("active", !!target.value.trim())
}, true)
</script>
</head>
<body>
<input type="text" class="form-input">
<label for="">выбрано</label>
<input type="text" class="form-input">
<label for="">выбрано</label>
<input type="text" class="form-input">
<label for="">выбрано</label>
<input type="text" class="form-input">
<label for="">выбрано</label>
<input type="text" class="form-input">
<label for="">выбрано</label>
</body>
</html>
|
рони,
trim бы тоже не помешал. ) |
laimas,
ок. добавил trim() |
И достаточно просто target.value.trim(), ибо возврат "пусто" тоже самое что false, иначе true.
|
| Часовой пояс GMT +3, время: 22:59. |