2011-10-26 21 views
5

Jestem bardzo nowa w Jquery, więc proszę przepraszam to pytanie. Próbuję zamienić obraz tła elementu <h1>, gdy użytkownik kliknie odpowiednie hiperłącze. Znaczniki <a> są generowane dynamicznie i może być ich "n" w dowolnej chwili, w zależności od tego, ile obrazów jest ustawionych w tabeli SQL.Wymiana obrazów z Jquery

Moje HTML jest:

<div id="feature-image"> 
    <h1><span>A random heading</span></h1> 
</div> 

<div id="feature-links"> 
    <a class="a1" href="#">1</a> 
    <a class="a2" href="#">2</a> 
    <a class="a3" href="#">3</a> 
</div> 

W <span> znaczniki są ustawione na display: none

Pisałem to stwierdzenie jQuery uruchamiane, gdy użytkownik kliknie hiperłącze w # funkcje linki div. Próbowałem ustawić var ​​image na nazwę klasy znaczników <a> (a1, a2, a3) itd., A następnie zmienić właściwość obrazu tła CSS <h1> przy użyciu image var jako części adresu URL .

<script> 
$(function(){ 
    $('#feature-links a').click(function(){ 
     var image = $(this).attr("class",""); 
     $('#feature-image h1').css('background-image','url=(\'main_' + image + '.jpg\')'); 
    }); 
}); 
</script> 

wszystkie moje zdjęcia są nazwane „main_a1.jpg”, „main_a2.jpg” i tak dalej ...

nie mogę zobaczyć, co robię źle, czy to, co ja próbuje do (chwyć nazwy klas itp. w vars) jest tak naprawdę dobrą praktyką, czy nie ... jakaś pomoc byłaby naprawdę doceniana.

Z góry dziękuję!

EDIT:

kod jQuery po edycji:

$(function(){ 
    $('#feature-links a').click(function(){ 
     var image = $(this).attr('class'); 
     $('#feature-image h1').css('background-image','url(images/main_' + image + '.jpg)'); 
    });    
}); 

Odpowiedz

5

Zmień linia:

var image = $(this).attr("class"); 

wierzę określając 2 parametry do funkcji .attr() służy do zmiany wartości atrybutu. Dlatego w twoim przypadku zmieniłoby to klasę na "".

Określanie jeden parametr zwróci wartość klasy

+0

Dzięki Curt, mam edytowane mój post powyżej, aby odzwierciedlić wygląd mojego kodu. To (niestety) nadal nie działa. Dziękuję za pomoc! –

+0

Zauważyłem mój błąd, to było z moim zagnieżdżeniem CSS. Wszystko działa świetnie! Dziękuję Ci! –

1

lepszy sposób, zamiast przy użyciu klasy byłoby ustawić href.

Na przykład:

$('#feature-links a').click(function(e){ 

    $('#feature-image h1').css({ 
     'background-image': 'url(' + $(this).attr('href') + ')' 
    }); 

    e.preventDefault(); // Stops the standard link behaviour 

}); 

Następnie linki po prostu odwołują się bezpośrednio do obrazu tła:

<a href="/path/to/image.jpg">1</a> 

nadzieję, że pomoże :)

+0

Podoba mi się to rozwiązanie, chciałem już wcześniej to zrobić, ale znalazłem się przy użyciu rzeczy, które "wiedziałem", jak to zrobić. Mimo to nie mogę tego uruchomić ... uruchamianie go przez firebuga nie znajduje błędów, ale obraz pozostaje taki sam :( –