JQuery меняет фон родительского div

У меня есть следующий фрагмент на одной из моих 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>

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

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

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

Ответ 1

Я думаю, используя

$(this).parents('div.inputBoxImage').css(...)

вместо $(this.parentNode) должен работать.

См. документацию jQuery .

Изменить: обновлено после ответа Prody (сменил родителя на родителей)

Ответ 2

Я не уверен на 100%, но я думаю, что вам нужно то, что предлагает Phill Sacre, за исключением использования parents (обратите внимание на последние s)

Из jQuery API:

parent (String expr) возвращает jQuery Получите набор элементов, содержащих уникальных родителей из согласованного набора элементов.

родители (String expr) возвращают jQuery Получите набор элементов, содержащих уникальные предки согласованного набора элементов (кроме корневого элемента).

Ответ 3

Теперь, поскольку в HTML только идентификаторы уникальны, вы можете напрямую ссылаться на div, не делая никаких обходов:

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

    </div>
</div>

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

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


  });
</script>

Обратите внимание, что, хотя можно фильтровать родительские элементы для классификации CSS, использование классов стиля dor behavior - это плохая идея TM, и вам следует избегать этого. Но если вы действительно в отчаянии, вы можете попробовать:

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

Ответ 4

.parent(). css (здесь изменяется)