JQuery Click-Problem

Enigmon · 27.05.2015

Hallo Leute,

ich bin dabei einen Kreisel-Slider zu programmieren (3 "Bilder" sichtbar, Front gross die anderen klein).
Ich weiss, es gibt genügend Plugins, aber ich möchte auch das Prinzip dahinter erlernen/verstehen.
Nun zu meinem Problem.
Ich habe 3 Klassen "front", "left" und "right". Wenn ich auf das Bild / div mit der Klasse left klicke, soll der Kreisel sich nach rechts drehen und die Klassen neu zugeordnet werden, d.h. das ehemalige linke Bild / div erhält die Klasse front und es wird die Klasse left entfernt usw.
Es funktioniert auch alles sehr gut. Im Firebug ist auch zu sehen das Klassen sich ändern.
Aber:
In dem Bsp. löst nur der Klick auf das Bild / div mit Klasse left ein Ereignis aus, d.h. es sollte nur immer das linke Bild / div eine Reaktion auslösen. Aber es lässt sich nur das Bild / div mit der originalen Anfangsklasse left anklicken egal ob sie nun front oder right als Klasse hat.

Wo könnte mein Denkfehler liegen?

Vielen Dank schon mal im Voraus
Thomas

Hier der Quellcode (Ein Bild sagt mehr als viele Worte):

HTML:

<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>Kreisel-Slider</title>
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script src="js/JQuery-Karusell-Slider.js"></script>
<style>
header, section, footer, aside, nav, main, article, figure {
    display: block;
}

#karusell-slider{
    width: 960px; height:400px; overflow: hidden;
    position: relative;
    margin: 50px auto 20px;
   
}
#karusell-slider img{
    border: 1px solid black;
   
}
#karusell-slider>div{
    /*background: rgb(127,127,127);*/
    border: 1px solid black;
}
.front{
    position: absolute; left: 180px;
    width: 600px; height: 300px; z-index: 50; margin: 0px auto 10px; top: 30px;
    background: rgb(65,76,170);
}
.left{
    position: absolute; left: 0;
    width: 400px; height:200px; z-index: 30; float: left;
    background: rgb(255,224,93);
}
.right{
    position: absolute; right: 0;
    width: 400px; height:200px; z-index: 30; float: right;
    background: rgb(92,185,59);
}
.other{
    display: none;
}
</style>
</head>

<body>
<header></header>
<nav></nav>
<section>
<div id="karusell-slider">
    <div id="ks_1" class="front" ><b>Ich bin jetzt front-Klasse</b></div>
    <div id="ks_2" class="left" ><b>Ich bin jetzt left-Klasse</b></div>
    <div id="ks_4" class="right"><b>Ich bin jetzt right-Klasse</b></div>
</div>
<div id="Kontrolle">Kontrolle: </div>
</section>
<footer></footer>
</body>

</html>

hier die JS- Datei:

Javascript:

$(document).ready(function(){
   
   $(".left").click(function(){
     $("#Kontrolle").append("LeftClick; ");
     rotateRight();
   });
   
   
   $(".right").click(function(){
     $("#Kontrolle").append("RightClick; ");
   });
   
   $(".front").click(function(){
     $("#Kontrolle").append("FrontClick; ");
   });
   
});

function rotateRight(){
     
     $( ".left" ).animate({
       width: "600px",
       height: "300px",
       left: "+=180",
       top: "+=30",
     }, 500, "swing",function() {
       $(this).css('z-index', 50);
       $(this).addClass("front");
       $(this).removeClass("left");
       $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse");
     });
     
     $(".front").animate({
       width: "400px",
       height: "200px",
       left: "+=380",
       top: "-=30",
     },500,function() {
       $(this).css('z-index', 30);
       $(this).addClass("right");
       $(this).removeClass("front");
       $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse");
     });
     
     $(".right").animate({
       left: "0",
     },500,"swing",function(){
       $(this).css('z-index', 30);
       $(this).addClass("left");
       $(this).removeClass("right");
       $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse");
     });
     
}

FlashZange · 27.05.2015

jQuery weist beim ersten Aufrufen dem Element einen Event handler zu, dass sich danach die Klasse ändert ist egal.
Schau dir mal die "on" oder die "live" funktion in jQuery an, damit wirds dann klappen.

Enigmon · 27.05.2015

Danke!!!!

Mit .on() hat es erstmal funktioniert. Bin gespannt, welche weiteren Probleme noch auf mich zukommen.

LG
Thomas

Enigmon · 27.05.2015

Erneutes Problem bereits gelöst..
Daher die Änderung des Beitrages..

LG
Thomas