Как добавить класс при клике на input?

Question

[Rebldomakr]

При клике на input добавляется в #contact-form класс .is-focused

Хочу сделать так, если #contact-form имеет класс .is-focused, то в #form-icon добавляем класс .skin-color, а если класс .is-focused отсутствует, то убираем.

Сделал как на первой картинке - не работает

Comments

[alex]

точку в селекторе уберите .hasClass('is-focused')

[Rebldomakr]

Alex, Убрал, все равно не помогает
Вот допустим, если я сам добавлю в #contact-form класс .is-focused, то скрипт работает
А так этот класс добавляется при нажатии на input и скрипт не видит этот класс.
Если я напишу:

if( $("#contact-form").hasClass("is-focused") ){
    console.log("some-text")
}

то ничего не произойдет

[alex]

Rebldomakr, ну так надо проверять наличие класса после каждого нажатия на инпут. клик на инпут --> проверили наличие класса is-focused --> добавили или убрали класс skin-color

[Rebldomakr]

Alex, А как проверять то?



Вот, когда нажимаю на input она появляется и применяются CSS стили.

Если что, то я использую Bootstrap material design

[Дмитрий Камянной]

input.focusout и input.foucusin . Как то так вообщем jsfiddle.net/6ynb0cqe

[alex]

Rebldomakr,

А как проверять то

блин)

[Rebldomakr]

Дмитрий Камянной, Помогло, спасибо большое

[Rebldomakr]

Дмитрий Камянной, Еще вопрос, допустим если инпутов 3-4 штуки и при нажатии на инпут должен меняться цвет иконки который стоит рядом нажатого инпута, для каждого инпута надо писать этот код?

Вот так: ссылка

[Дмитрий Камянной]

Совершенно не нужно городить много классов и т.д. Есть десятки возможностей для упрощения . И столько же функций. Вот самая простая структура.

var icon = $(".form i");
    var input = $(".form");

    //input
    input.focusin(function() {
        $(this).find('input, i').addClass("valid");

    });
    input.focusout(function() {
        $(this).find('input, i').removeClass("valid");
    });

Используем $this . Так же можно еще и toggleClass поиграть .

Answer 1

[Stalker_RED]

Прекрати выкладывать код картинками, никому не хочется его перепечатывать, чтобы показать отредактированный вариант.

В идеале было бы собрать пример в песочнице, в jsfiddle или codepen или plnkr. Тогда его можно за минутку подправить, и все.

Попробуй внятно описать словами что ты вообще пытаешься сделать. Сейчас выглядит довольно странновато, учитывая что в css есть псевдоселектор :focus