Forum » Izdelava spletišč » jquery dodajanje in odstranjevanje classov
jquery dodajanje in odstranjevanje classov
DrYuri ::
Imam eno zelo čudno težavo. Izdelati hočem neko precej enostavno galerijo s pomočjo jquerya, vendar mi dogaja nekaj čudnega pri odstranjevanju razredov s pomočjo funkcije .removeClass("razred"). Lastnosti, ki so podane v css datoteki se normalno aplicirajo vendar pri kliku na sliko katera naj nebi imela več tega razreda, še vedno zazna kot da je tistega razreda... Kako to izgleda: imam 3 slike, katere imajo vsaka svoj razred(leftPic,centerPic,rightPic). Ko se zgodi klik na levo sliko bi morala leva imeti razred centerPic, srednja in desna pa rightPic. Če gledam v konzoli v chromu se to res zgodi, vendar se mi testni izpis na katero sliko je bil izveden klik ne spremeni:/ Pa tudi ko drugič kliknem na levo sliko se spet kliče click funkcija za razred .leftPic in tako ima leva slika sedaj rightPic in centerPic razred. Any ideas?
<body> <h2>galerija</h2> <div id="galerija"> <img class="leftPic" src="slika.jpg"> <img class="centerPic" src="slika.jpg"> <img class="rightPic" src="slika.jpg"> </div> </body>
#galerija{
width:70%;
height:500px;
margin-top:200px;
margin: 0 auto;
}
.centerPic{
width:450px;
}
img{
width:350px;
}
$(document).ready(function(){
//left
$(".leftPic").click(function(){
//shift right
$(".centerPic").addClass("rightPic").removeClass("centerPic");
$(this).addClass("centerPic").removeClass("leftPic");
$("h2").text("left pressed");
});
//right
$(".rightPic").click(function(){
$("h2").text("right pressed");
});
//center
$(".centerPic").click(function(){
$("h2").text("center pressed");
});
});
- spremenil: DrYuri ()
usoban ::
Situacija je sledeca ... jQuery.click() funkcija pripne podani callback na elemente, ki jih najde (v tvojem primeru je to ob document ready eventu). Cetudi ti elementu odstranis razred, katerega si uporabil za selector, ima ta se vedno pripet callback od prej. Lahko mu ga odstranis z jQuery.unbind(eventNames), ampak se mi zdi da ti to nekako ne koristi.
Do nedavnega si lahko v takih primerih uporabil jQuery.live(eventName, callbackFn), ampak je od 1.7 deprecated, od 1.9 pa ga sploh ni vec. Namesto njega lahko uporabis
Tvoj JS pa naj bi izgledal takole:
[1]: http://jquery.com/upgrade-guide/1.9/#li...
[2]: http://api.jquery.com/on/
Do nedavnega si lahko v takih primerih uporabil jQuery.live(eventName, callbackFn), ampak je od 1.7 deprecated, od 1.9 pa ga sploh ni vec. Namesto njega lahko uporabis
$(document).on(eventName, selector, callbackFn), vec pa si preberi na [1], [2].
Tvoj JS pa naj bi izgledal takole:
$(document).ready(function(){
//left
$(document).on("click", ".leftPic", function(){
//shift right
$(".centerPic").addClass("rightPic").removeClass("centerPic");
$(this).addClass("centerPic").removeClass("leftPic");
$("h2").text("left pressed");
});
//right
$(document).on("click", ".rightPic", function(){
$("h2").text("right pressed");
});
//center
$(document).on("click", ".centerPic", function(){
$("h2").text("center pressed");
});
});[1]: http://jquery.com/upgrade-guide/1.9/#li...
[2]: http://api.jquery.com/on/
Vredno ogleda ...
| Tema | Ogledi | Zadnje sporočilo | |
|---|---|---|---|
| Tema | Ogledi | Zadnje sporočilo | |
| » | Vprašanje glede java kalkulatorjaOddelek: Programiranje | 1173 (872) | techuser |
| » | [JavaScript] nastavljanje CSS stila v določenem elementu HTML seznamaOddelek: Izdelava spletišč | 882 (844) | iMark |
| » | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11247 (9985) | lisjak |
| » | radio onclick ne dela ?!?Oddelek: Programiranje | 625 (496) | vorantz |
| » | javascript jquey slidshow + dodatek (kako?)Oddelek: Izdelava spletišč | 800 (737) | frudi |