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, существует ли способ изменить эту функцию так, чтобы это работало с обоими, заменяя фоновое изображение различным изображением для каждого?
4 ответа
Я думаю с помощью
$(this).parents('div.inputBoxImage').css(...)
вместо $(this.parentNode) должен работать.
См., что jQuery пересекает документацию
Править: обновленный после ответа Prody (измененный родитель к родителям)
Я не на 100% уверен, но я думаю, в чем Вы нуждаетесь, то, что ответ Phill Sacre предлагает кроме использования parents (заметьте последний s),
Из jQuery API:
родитель (Представляют expr в виде строки) возвращается, jQuery Получают ряд элементов, содержащих уникальных родителей подобранного набора элементов.
родители (Представляют expr в виде строки) возвращаются, jQuery Получают ряд элементов, содержащих уникальных предков подобранного набора элементов (за исключением корневого элемента).
Теперь с тех пор в 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)');
});