JQuery, изменяющий фон родительского отделения

У меня есть следующий отрывок в одной из моих страниц HTML:

<div class="inputboximage">
    <div class="value2">
    <input name='address1'  value='Somewhere' type="text" size="26" maxlength="40" />
    <br />

    </div>
</div>

Моя проблема состоит в том, что мне нужно inputboximage background измениться, когда я нажимаю в address1 текстовое поле и вернуться к оригиналу, когда это теряет фокус.

Я использовал следующее:

  <script>
  $(document).ready(function(){

    $("input").focus(function () {
         $(this.parentNode).css('background-image', 'url(images/curvedinputblue.gif)');
    });

    $("input").blur(function () {
    $(this.parentNode).css('background-image', 'url(images/curvedinput.gif)');
    });

  });
  </script>

но вместо того, чтобы заменить изображение, это, кажется, добавляет фоновое изображение к value2 отделению, как Вы ожидали бы. Я могу использовать parentNode.parentNode в этом случае, но существует также шанс что inputboxImage узел мог быть далее или вниз семенное дерево.

Есть ли способ, которым я могу изменить этот код так, чтобы он переместился вниз по семенному дереву, пока он не найдет, что отделение звонило inputboximage и замените изображение там?

Кроме того, если у меня есть два различных класса отделения, inputboximage и inputboximageLarge, существует ли способ изменить эту функцию так, чтобы это работало с обоими, заменяя фоновое изображение различным изображением для каждого?

12
задан Priyanga 18 October 2019 в 07:57
поделиться