JQuery: Как добавить класс динамически созданному элементу, если смежное с ним текстовое поле не является пустым?

Question

[Максим Панов]

Здравствуйте!

Имеется блок со следующей структурой:

<span class="input input_has-clear">
   <span class="input__box">
      <input class="input__control" type="text" value="">
   </span>
</span>

Необходимо после .input__control добавить новый элемент с классом .input__clear. При вводе данных в текстовое поле к динамически созданному элементу .input__clear нужно добавить дополнительный класс .input__clear_visible и удалить данный класс, если поле становится пустым.

Задачу решаю так:

$(function() {
   // Добавляем новый элемент
   $(".input_has-clear").append("<i class='input__clear'>");

   // Если поле не является пустым
   if($(".input_has-clear").val() != "") {
      // Добавляем/удаляем класс
      $(this).find(".input__clear").toggleClass("input__clear_visible");
   }
});

Проблема в том, что первая строка с добавлением элемента прекрасно работает, а вот условие выполняться не хочет, как его ни крутил: были попытки оборачивать услевие в события change и focus. Не подскажете, как решить задачу? Сам пока постигаю "азы", собирая собственную CSS-библиотеку компонентов на основе БЭМ.

Спасибо!

Answer 1

[Алексей Уколов]

Корректный код:

$(".input_has-clear").append("<i class='input__clear'>x</i>");

// Ставим обработчик на событие изменения поля
$('.input__control').on('change', function () {
    // Находим родительский блок
    $(this).closest('.input_has-clear')
        // в родительском блоке находим нужный элемент
        .find(".input__clear")
        // скрываем или показываем элемент в зависимости от заполненности поля
        // обратите внимание, что toggleClass вторым аргументом принимает чисто булевое значение
        // поэтому при помощи двойного отрицания приводим строку к нему
        // если она пустая - будет false и класс уберется, иначе - добавится
        .toggleClass("input__clear_visible", !!$(this).val());
});

jsfiddle.net/koceg/j40vquoo

В вашем коде очень многое неверно:

$(function() {
   $(".input_has-clear").append("<i class='input__clear'>");

   // 1. Этот код выполнится один раз при загрузке страницы,
   // вам же, наверняка, нужно, чтобы элемент скрывался или показывался
   // динамически по мере редактирования поля
   // 2. .input_has-clear - это span, у него нет value
   if($(".input_has-clear").val() != "") {
      // Логика определения скрытия и показа класса неверная
      // Если повесить на поле обработчик, то при вводе каждой буквы
      // Элемент будет то скрываться, то показываться
      $(this).find(".input__clear").toggleClass("input__clear_visible");
   }
});

P.S.

цикл выполняться не хочет

В вашем коде нет ни одного цикла.

Comments

[Максим Панов]

Ох!)) По поводу value у span - аж стыдно стало. Я-то думал, в чем проблема: и события выставлял и манипуляции с добавлением класса менял, - все бесполезно.

[Алексей Уколов]

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

[Максим Панов]

Алексей Уколов: Огромное спасибо!

Answer 2

[Алексей Зуев]

Как вариант вот так