1

Код работает только при загрузке документа. Как сделать, чтобы код работал при изменении значения в .search_field input?

$(function() {
    if ($('.search_field').find('input').val()) {
        $('.button_field').find('input').css('background', '#bf1238 url(http://torawhite.ru/views/torawhite_ru/images/loop_white.svg) center no-repeat');
    } else {
        $('.button_field').find('input').css('background', '#aaaaaa url(http://torawhite.ru/views/torawhite_ru/images/loop_white.svg) center no-repeat');
    }
});
5
  • @Regent если убрать текст из поля, то скрипт не меняет обратно background
    – Torawhite
    23 июн 2015 в 5:14
  • @Regent и при вводе в само текстовое поле текста тоже не добавляет. Добавляет только, если в html самостоятельно прописать текст в атрибуте value=""
    – Torawhite
    23 июн 2015 в 5:17
  • @Regent вот это я и пытался выяснить, я не силён в js, почему так происходит понимал, но не мог найти нужный алгоритм. Спасибо!
    – Torawhite
    23 июн 2015 в 5:29
  • За неимением нужного опыта корректная и понятная формулировка не всегда приходит в голову, к сожалению
    – Torawhite
    23 июн 2015 в 5:37
  • 1
    Как говорится: "Правильно заданный вопрос содержит половину ответа".
    – Regent
    23 июн 2015 в 5:39

1 ответ 1

2

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

$(function() {
  $('.search_field').find('input').on('keyup', switcher);
  switcher();
});
function switcher() {
  if ($('.search_field').find('input').val()) {
    $('.button_field').find('input').css('background', '#bf1238 url(http://torawhite.ru/views/torawhite_ru/images/loop_white.svg) center no-repeat');
  } else {
    $('.button_field').find('input').css('background', '#aaaaaa url(http://torawhite.ru/views/torawhite_ru/images/loop_white.svg) center no-repeat');
  }
}
div {
  padding : 7px;
}
.search_field > input{
   width : 230px;
   padding-left: 20px;
   padding-right: 20px;
   height: 26px;
}
.button_field > input{
  width : 270px;
  padding: 0 150px 0px 0px;
  color : white;
  height: 28px;
}
<div class="search_field">
  <input type="text" value="Значение при создании"/>
</div>
<div class="button_field">
  <input type="button" value="SEARCH" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

9
  • спасибо большое, то, что нужно!
    – Torawhite
    23 июн 2015 в 5:30
  • Переписал пример под разметку @Regent, она более точная
    – oshliaer
    23 июн 2015 в 5:32
  • 1
    Кстати, можно $('.search_field').find('input') (и прочие подобные конструкции) заменить на $('.search_field input'). Код это делает короче, работает так же. Проще ли для восприятия - не знаю.
    – Regent
    23 июн 2015 в 5:35
  • @Regent, была б моя воля, я бы так не написал вообще. Слишком низкий уровень абстракции, там же может быть чорт знает что.
    – oshliaer
    23 июн 2015 в 5:37
  • 1
    @AlexanderIvanov в длинном селекторе? Так ведь он тут не 100 символов - вполне видно что именно выбирается из документа.
    – Regent
    23 июн 2015 в 5:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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