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
поделиться

4 ответа

Я думаю с помощью

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

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

См., что jQuery пересекает документацию

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

22
ответ дан 2 December 2019 в 06:28
поделиться

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

Из jQuery API:

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

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

2
ответ дан 2 December 2019 в 06:28
поделиться

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

<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, с помощью поведения жука-навозника классов стиля, Плохой ТМ Идеи, и необходимо постараться не делать это. Но если Вы являетесь действительно отчаянными, можно дать ему попытку:

$("input").focus(function () {
         $(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
    });
0
ответ дан 2 December 2019 в 06:28
поделиться

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

0
ответ дан 2 December 2019 в 06:28
поделиться
Другие вопросы по тегам:

Похожие вопросы: