1

Всем привет. Уже всю голову сломал.

$("input[name='variants[color][]']").each(function() {
  if ($(this).val() == '') {
    $(this).parent().prev().children('.target').css("background-color", "#fff");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="height">
  <input type="text" />
  <input type="text" />
  <div class="target" style="background: #fff;"></div>
</li>

<li class="color">
  <input name="variants[color][]" type="text" value="" />
  <input type="text" />
</li>

Такие пары li идут один за другим, их много. Мне нужно: если input[name="variants[color][]"] пустой (то есть, не заполнен), то у div.target поменять значение атрибута style.

Но не выходит. Как правильно?

Заранее благодарю.

2
  • Ну у тебя и фантазия)))) Это я на счет атрибута name="variants[color][]"...))))))) С чего такое название...? Праздное любопытство)
    – Air
    8 фев 2018 в 20:22
  • )) Это в движке так. PHP берет значения из этих input-ов.
    – DimyCH
    8 фев 2018 в 20:29

3 ответа 3

2

Всё работает (кроме нулевой высоты). Если надо, чтобы оно обновлялось при изменении значения, надо подписываться на событие input:

function updateBg() {
  var $this = $(this);
  $this.parent().prev().children('.target').css("background-color", $this.val() ? "" : "red");
}

$("input[name='variants[color][]']").each(updateBg).on('input', updateBg);
.target {
  min-height: 1em;
  margin: 1em 0;
  background: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="height">
  <input type="text" />
  <input type="text" />
  <div class="target"></div>
</li>

<li class="color">
  <input name="variants[color][]" type="text" value="" />
  <input type="text" />
</li>

2
  • Спасибо за ответ. Не, мне не нужно по событию. Мне при загрузке страницы (вернее, после). Странное дело. В консоли я вижу эти элементы через console.log. Но после добавления .css(...) - ничего не меняется. Пишу так: ... .css("background-color", "rgb(255, 255, 255)");
    – DimyCH
    8 фев 2018 в 20:44
  • 1
    ru.stackoverflow.com/a/714833/178988
    – Qwertiy
    8 фев 2018 в 20:45
1

Так правильно. Нужно проверять поле на изменение состояния и тогда проверять, пустое оно или нет.

$("input[name='variants[color][]']").on("change, input", function(){
  $("input[name='variants[color][]']").each(function() {
    if ($(this).val() == '') {
      $(this).parent().prev().children('.target').css("background-color", "red");
    } else {
    $(this).parent().prev().children('.target').css("background-color", "gray");
    }
  });
});
.target {
  height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="height">
  <input type="text" />
  <input type="text" />
  <div class="target" style="background: red;"></div>
</li>

<li class="color">
  <input name="variants[color][]" type="text" value="" />
  <input type="text" />
</li>

1
  • Спасибо за ответ. Не, мне не нужно по событию. Мне при загрузке страницы (вернее, после). Странное дело. В консоли я вижу эти элементы через console.log. Но после добавления .css(...) - ничего не меняется. Пишу так: ... .css("background-color", "rgb(255, 255, 255)");
    – DimyCH
    8 фев 2018 в 20:45
1

Всем Большое Спасибо за ответы. Все решилось оборачиванием кода функцией $( document ).ready)))

1
  • 2
    Если бы скрипты подключались после разметки, $(document).ready было бы необязательно.
    – Qwertiy
    8 фев 2018 в 20:55

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.