jquery - ändern der ID einer DIV-Box nacheinander

S

sportziglo

Grünschnabel
Hallo Leute,

ich bin ein Frischling in Sachen Jquery.
Ich möchte das Attribut ID einer DIV-Box in einer zeitlichen Abfolge verändern. D.h. es soll sich bsplw. durch ein "Click-Event" die Farbe von Rot über Blau, Gelb nach Grün verändern.

Hierzu mein Code-Bsp.:
HTML: 
<html>
<head>
	<title>test</title>
	<style type="text/css">
	#blue{ background-color: blue; }
	#red{ background-color: red; }
	#green{ background-color: green; }
	#yellow{ background-color: yellow; }
	div{
		position: absolute;
		width: 100px;
		height: 100px;
	}
	div.tl{
		left: 100px;
		top: 100px;
	}
	div.tr{
		left: 300px;
		top: 100px;
	}
  </style>
	<script src="jquery.tools.min.js"></script>
	<script>

	function wait(millis){
		var date = new Date();
		var curDate = null;
		
		do { curDate = new Date(); }
		while(curDate-date < millis);
	}
	</script>
</head>
<body>

<div class="tl" id="blue"></div>
<div class="tr" id="red"></div>

<script>
$(document).ready(function(){              
    $("div.tl").click(function() {
        $("div.tr").attr('id','blue');
        wait(1000);
        $("div.tr").attr('id','yellow');
        wait(1000);
        $("div.tr").attr('id','green');
    });
});
</script>
</body>
</html>

Leider klappt es nicht ganz so, wie ich es mir vorstelle. Wie haut die Verschachtelung sinnvoll hin? Liegt das Problem in der Wait-Funktion?

Vielen Dank für Eure Unterstützung.

Gruß sportziglo
 
Drei Sachen:

1. Die ID für so etwas zu missbrauchen sollte strafbar sein :-D. Entweder setzt du via jQuery den Farbwert oder nimm eine Klasse dafür.

2. Nimm bloß das wait weg. JavaScript ist eine Eventbasierte Sprache und du machst damit alles kaputt. Also anstatt des waits machst du folgendes.
Javascript: 
//vorher:
wait(1000);
machWas();

//nachher
window.setTimeout('machWas()', 1000)

3. Wait ist zu dem noch fehlerhaft implementiert. Ich will dir eigentlich gar nicht sagen, wie es richtig geht, weil es ja ohnehin weg soll. Hinweis: So subtrahiert man keine Date-Objekte.


Von all dem mal abgesehen wird der Kasten bei mir nach dem Klick korrekt grün. Die anderen Farben fallen wegen des fehlerhaften waits gar nicht auf (werden sofort übersprungen).


Edit: Soll es animiert sein (fließende Übergänge) oder so wie es bei dir gedacht war abgehackt nacheinander? Dann mach ich dir schnell ein Beispiel.

Edit2: Hier mal ohne Animation, so wie du es versucht hast.
Bei komplizierteren Sachen würde man es eher über eine Funktion lösen, weil diese Schachtelei einen dann nervt, aber hier geht's auch so.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Farbwechsel</title>
	
	<style type="text/css">
	#box1, #box2 {		
		width:100px;
		height:100px;
		position:absolute;
		top:100px;
	}
	
	#box1 {
		background:blue;
		left:100px;
	}
	
	#box2 {
		background:red;
		left:300px;
	}
	</style>
</head>

<body>
	<div id="box1"></div>
	<div id="box2"></div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
	/* <![CDATA[ */
		$(document).ready(function(){
			$("#box1").click(function() {
				$("#box2").css("background", "blue");
				
				window.setTimeout(function() {
					$("#box2").css("background", "yellow");
					
					window.setTimeout(function() {
						$("#box2").css("background", "green");
					}, 1000);
				}, 1000);
			});
		});
	/* ]]> */
	</script>
</body>

</html>

Edit3:
Hier noch die angesprochene "schöne" Version mit einer Funktion. Die Farben werden von rechts nach links aus dem Array genommen.

Javascript: 
$(document).ready(function(){
	$("#box1").click(function() {
		farbWechsel($("#box2"), ['blue', 'yellow', 'green', '#f90', '#ccc']);
	});
});

function farbWechsel(obj, farben) {
	var next = farben.pop();
	if(next) {
		obj.css("background", next)
		window.setTimeout(function() {
			farbWechsel(obj, farben);
		}, 1000);
	}
}
 
Zuletzt bearbeitet:
Hey CPoly,

vielen Dank für Deine Hilfe! Ich hatte mich erst am Wochenende an die Baustelle setzen können und Dein Beitrag hat sehr bei der Lösung des Problems geholfen.
Ich hatte hier nur ein Bsp. (ob der Einfachheit) gepostet - daher auch die Variante über die ID zu gehen. Wie dem auch sei, Deine Mühen haben mir die Materie noch mal näher gebracht. Das mit der wait-Fkt. ist mir nun etwas peinlich. ;-)

Schöne Grüße
sportziglo
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück