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)');
});
});
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! –
Zauważyłem mój błąd, to było z moim zagnieżdżeniem CSS. Wszystko działa świetnie! Dziękuję Ci! –