Jquery zmieniając tło macierzystego div

Question

Mam następujący fragment jednego z moich stron HTML:

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

    </div> 
</div> 

Moim problemem jest to, że muszę inputboximage tło zmienić po kliknięciu w polu tekstowym address1 i powrócić do oryginału, gdy traci ostrość.

Użyłem następujących czynności:

<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> 

ale zamiast zastępując obraz, wydaje się być dodanie obrazu tła na div VALUE2 jak można by oczekiwać. W tym przypadku mogę użyć parentNode.parentNode, ale istnieje również szansa, że ​​węzeł inputboxImage może być dalej w górę lub w dół drzewa nadrzędnego.

Czy istnieje sposób, w jaki mogę zmienić ten kod, aby nawigował w dół drzewa nadrzędnego, dopóki nie znajdzie elementu div o nazwie inputboximage i zastąpi tam obraz?

Ponadto, jeśli mam dwie różne klasy div, inputboximage i inputboximageLarge, czy istnieje sposób zmodyfikowania tej funkcji, aby działał z obydwoma, zastępując obraz tła innym obrazem dla każdego z nich?

Answer 1

myślę użyciu

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

zamiast $(this.parentNode) powinno działać.

Zobacz jQuery traversing documentation

Edit: zaktualizowane następujące odpowiedzi Prody'S (zmienił dominującą do rodziców)

Answer 2

nie jestem w 100% pewien, ale myślę, że to, czego potrzebujesz jest to, co sugeruje odpowiedź Phill Sacre za wyjątkiem stosowania parents (zawiadomienie ostatni s)

Od jQuery API:

rodzica (wyrażenie String) zwraca jQuery dostać zestaw elementów zawierających unikalne paren ts dopasowanego zestawu elementów.

Rodzice (Wyrażenie String) zwraca jQuery Uzyskaj zestaw elementów zawierających unikalnych przodków dopasowanego zestawu elementów (z wyjątkiem elementu głównego).

Answer 3

Teraz ponieważ w HTML tylko Identyfikatory są unikalne, można odwołać div bezpośrednio bez jakiegokolwiek przechodzenie:

<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> 

pamiętać, że możliwe jest, aby filtrować elementy nadrzędne dla CSS pogrupowanie, używając klasy stylu dor zachowanie to Bad Idea TM i powinieneś tego unikać. Ale jeśli jesteś naprawdę zdesperowany, można spróbować.

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

Answer 4

.parent() CSS (zmiany tutaj)