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, есть ли способ изменить эту функцию, чтобы она работала с обоими, заменив фоновое изображение другим изображением для каждого из них?
Ответы 4
Я думаю, используя
$(this).parents('div.inputBoxImage').css(...)
вместо $(this.parentNode) должно работать.
См. JQuery путевая документация
Обновлено: обновлено после ответа Prody (изменил родительский элемент на родителей)
Я не уверен на 100%, но я думаю, что вам нужно то, что предлагает ответ Phill Sacre, за исключением использования parents (обратите внимание на последние)
Из jQuery API:
parent (String expr) возвращает jQuery Получите набор элементов, содержащий уникальных родителей согласованного набора элементов.
родители (String expr) возвращает jQuery Получите набор элементов, содержащий уникальных предков согласованного набора элементов (кроме корневого элемента).
Вы совершенно правы. parent (...) ищет только непосредственного родителя. Мне всегда удается запутать этих двоих!
Теперь, поскольку в 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, использование классов стилей или поведения является плохой идеей TM, и вам следует избегать этого. Но если вы действительно в отчаянии, вы можете попробовать:
$("input").focus(function () {
$(this).parents('div.inputboximage').css('background-image', 'url(images/curvedinputblue.gif)');
});
.parent (). css (здесь изменения)
Спасибо, Фил, это отлично работает. Все, что мне нужно сделать сейчас, это выяснить, как заставить его работать для других элементов, которым нужна такая же функциональность, но разные фоновые изображения.