Môj DOM vyzerá takto:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Keď niekto klikne na obrázok, chcem, aby sa src obrázka zmenil na <img src="imgx_off.gif">
, kde x
predstavuje obrázok číslo 1 alebo 2.
Je to možné alebo musím na zmenu obrázkov použiť CSS?
Môžete použiť funkciu jQuery's attr(). Ak má napríklad váš tag img
atribút id
s hodnotou 'my_image', urobíte toto:
<img id="my_image" src="first.jpg"/>
Potom môžete zmeniť src
vášho obrázka pomocou jQuery takto:
$("#my_image").attr("src","second.jpg");
Ak to chcete pripojiť k udalosti click
, môžete napísať:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Ak chcete obrázok otočiť, môžete urobiť toto:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Ukážem vám, ako zmeniť obrázok src
tak, aby sa po kliknutí na obrázok otáčal cez všetky obrázky, ktoré sú vo vašom HTML (konkrétne vo vašom id d1
a triede c1
)... či už máte v HTML 2 alebo viac obrázkov**.
Ukážem vám tiež, ako vyčistiť stránku po dokončení dokumentu tak, aby sa na začiatku zobrazil len jeden obrázok.
Úplný kód
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
Rozdelenie
Vytvorte kópiu odkazov obsahujúcich obrázky (poznámka: pre pridanú funkčnosť by ste mohli využiť aj atribút href odkazov... napríklad [zobraziť pracovný odkaz pod každým obrázkom][1]):
var $images = $("#d1 > .c1 > a").clone(); ;
Skontrolujte, koľko obrázkov bolo v HTML, a vytvorte premennú na sledovanie toho, ktorý obrázok sa zobrazuje:
premenná $dĺžka = $images.length;
var $imgShow = 0;
Upravte dokument'HTML tak, aby sa zobrazoval len prvý obrázok. Všetky ostatné obrázky odstráňte.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Viažte funkciu, ktorá sa postará o kliknutie na odkaz na obrázok.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
Jadrom uvedeného kódu je použitie ++$imgShow % $length
na cyklické prechádzanie objektu jQuery, ktorý obsahuje obrázky. ++$imgShow % $length
najprv zvýši naše počítadlo o jednotku a potom toto číslo zmení na počet obrázkov. Výsledný index sa tak bude cyklicky meniť od 0
po dĺžka-1
, čo sú indexy objektu $images
. To znamená, že tento kód bude pracovať s 2, 3, 5, 10 alebo 100 obrázkami... cyklicky prechádza každý obrázok v poradí a po dosiahnutí posledného obrázka sa znovu spustí od prvého obrázka.
Okrem toho sa .attr()
používa na získanie a nastavenie atribútu "src" obrázkov. Na výber prvkov z objektu $images
nastavím $images
ako jQuery context pomocou tvaru $(selector, context)
. Potom použijem .eq()
na výber práve prvku s konkrétnym indexom, ktorý ma zaujíma.
Môžete tiež uložiť src
do poľa.
[jsFiddle príklad s 3 obrázkami][6]
A tu'je spôsob, ako začleniť hrefs zo značiek kotiev okolo obrázkov:
[jsFiddle príklad][7]
Môžete to urobiť aj pomocou jQuery týmto spôsobom:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Môžete mať podmienku, ak existuje viacero stavov pre zdroj obrázku.