V ramci event listeneru by si mal odkazovat na element nad ktorym vykonavas event cez "this":
Kód: Vybrať všetko
$(document).ready(function(){
$('.marker img').click(function(){
var self = this;
$('.dostupnost_line').slideToggle(function(){
if( $(self).attr('src') == "/img/marker_close.png" ) {
$(self).attr('src', '/img/marker_open.png');
}
else if ($(self).attr('src') == "/img/marker_open.png") {
$(self).attr('src', '/img/marker_close.png');
}
});
});
});
2 pripomienky ku kodu.
1) Pokial je to mozne, tak na elementy v ramci DOM odkazuj priamo. Teda nie
ale radsej
Kód: Vybrať všetko
$('img.nejaka-trieda') // alebo este lepsie $('#id-elementu')
To druhe sa vykona rychlejsie, kedze obaluje nativne javacsript metody (getElementsByTagName() alebo getElementById()), narozdiel od prveho riesenia, ktore musi prehladavat cely DOM.
Ak uz nevyhnutne potrebujes odkazovat na child cez parenta, tak je podstatne rychlejsie (na novsich browseroch) pouzivat find() metodu:
Mam k tomuto aj zdroje, ktore popisuju ako vplyvaju jednotlive selectory na performance, ale neviem sa teraz dostat na firemny mail, takze az pondelok.
2) toto mi pride ako lepsie riesenie, hlavne keby si chcel dodatocne menit element aj cez CSS ked je aktivny/neaktivny. Netusim ako je to s vykonom, ale da sa to zmerat cez jsperf.com
Kód: Vybrať všetko
$(document).ready(function(){
$('.marker').find('img').click(function(){
var self = this;
$('.dostupnost_line').slideToggle(function(){
if( $(self).hasClass('active') )
{
$(self).attr('src', '/img/marker_close.png').removeClass('active');
}
else
{
$(self).attr('src', '/img/marker_open.png').addClass('active');
}
});
});
});
Dekuju
