jQuery - Click - Zuweisung von divs per schleife

C

crsakawolf

Erfahrenes Mitglied
Hallo Leute,

ich verzweifle gerade etwas.

Folgendes Problem.

Ich habe 4 Div's welche per Click-Event jeweils ein anderes Div laden sollen.
Das Click würde ich per Schleife generieren

Nach mehreren Versuchen treten Fehler, wie z.B. nur das letzte Div wird geladen oder es werden pro klick divs geladen und nach 4 mal klicken war es das, auf.

Hier ersteinmal der Code


HTML: 
<div class="top_t" id="top_1">
   Titel
</div>                
         <div id="bott_1" class="bott">
             Inhalt
         </div>
<div class="top_t" id="top_2">
   Titel
</div>                
         <div id="bott_2" class="bott">
             Inhalt
         </div>

Der JS
Code: 
$(document).ready(function(){
	var j = 1;
			$('.top_t').each(function() {
					$(this).click(function(){
						$(".top_t").animate({
							width: "380px"
						},1500, function(){
							$("#textbox").fadeIn('slow');
						});
						$(".selected").removeClass("selected");
						$(this).addClass("selected");
						var htmlStr = $("#bott_" + j).html();
						$("#textbox").html(htmlStr);	
						j++;
					}); 	     
					
			});
});

Danke schoneinmal für die Hilfe.
 
Ich würde es so lösen:

Javascript: 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('.top_t').click(function() {
    $('.selected').removeClass("selected").addClass("bott");
    $('#' + $(this).attr('id')).next().removeClass("bott").addClass("selected");
});

});
</script>

HTML: 
<div class="top_t" id="top_1">Titel 1</div>
<div id="bott_1" class="bott">Inhalt 1</div>

<div class="top_t" id="top_2">Titel 2</div>
<div id="bott_2" class="bott">Inhalt 2</div>

<div class="top_t" id="top_3">Titel 3</div>
<div id="bott_3" class="bott">Inhalt 3</div>

<div class="top_t" id="top_4">Titel 4</div>
<div id="bott_4" class="bott">Inhalt 4</div>

<div class="top_t" id="top_5">Titel 5</div>
<div id="bott_5" class="bott">Inhalt 5</div>
 
Zuletzt bearbeitet:
Das funktioniert super.

Das Problem ist jedoch, das ich die Divs nicht darunter ausgeben will, sondern in einem gesondertem div namens 'textbox'.

* Es soll eigentlich so funktionieren.

4 Divs auf 700px
- bei Click werden die Divs auf 350px verkleinert mittels animate();
danach soll ein Div rechts neben diese 4 Divs mit der breite 350px
also
[DIV --------]
[DIV --------]
[DIV --------]
[DIV --------]

zu

[DIV]=====|
[DIV] DIV |
[DIV] |
[DIV]=====|

Und es soll ein variabler text bei jedem der 4 divs in das 5te ausgegeben werden.
 
Zuletzt bearbeitet:
Ok, ich habe mich schon gewundert wofür "textbox" stehen soll.
Beschreibe mal bitte ein bisschen genauer was sichtbar ist und was erst eingeblendet werden soll.

Die IDs "top_X" und "bott_X" sind dann wohl immer sichtbar? Welche davon sollen beim Anklicken reagieren, was soll angezeigt werden und gibt es nur die eine "textbox"?
 
Hallo zurück :)

Am Anfang sind alle Top-Divs auf 700px.
Bei einem Klick auf einen der 4 Divs sollen alle 4 auf 350px schrumpfen und der 5. div textbox soll rechts neben den 4 divs faden. Danach soll der jeweilige Text, welcher zu bott_x gehört in die Textbox.

Also

Klick auf irgendeinen Div (x)
-> Alle Divs kleiner
-> FadeIn Textbox
-> Fülle Textbox mit Bott (x)

Danach sollen bei jedem Klick nur die jeweiligen Bott (x) in die Textarea.
Der Visuelle Effekt soll also nur beim ersten klick auf eines der 4 Divs geschehen.

Danke dir

PS: Theoretisch muss auch keine Textbox gefüllt werden sondern nur das jeweilige bott (x) angezeigt werden (class:bott bekommt dann einfach die css von textbox und da kommt es auf das gleiche)
 
Zuletzt bearbeitet:
Zeig mal bitte deinen (relevanten) Code - also die "normalen" DIVs und die "textbox" - und auch die CSS Angaben für die Klassen.

Was ich immer noch nicht verstanden habe, ist was mit den "bott_X" DIVS passiert. Sind die nie sichtbar und nur dazu da den HTML Code weiterzugeben?

Was passiert/soll passieren wenn die Klassen gewechselt werden?
 
HTML: 
<style>
	.top_t {
		width:680px;
		border:1px solid #DDD;
		padding:15px 10px 15px 10px;
		display:block;
		float:left;
		margin-bottom:3px;
		color:#FFF;
		font-weight:bold;
		background-color:#bde18a;
.bott { display:none; }
.selected{
	 	padding:10px;
		padding-top:20px;
		float:right;
		width:275px;
		min-height:190px;
		padding-top:5px;
		padding-bottom:5px;
		//background-color:#EEEEEE;
		border:1px dashed #CCC;
		display:none;
	}
}

<div class="top_t" id="top_1">Titel 1</div>
<div id="bott_1" class="bott">Inhalt 1</div>

<div class="top_t" id="top_2">Titel 2</div>
<div id="bott_2" class="bott">Inhalt 2</div>

<div class="top_t" id="top_3">Titel 3</div>
<div id="bott_3" class="bott">Inhalt 3</div>

<div class="top_t" id="top_4">Titel 4</div>
<div id="bott_4" class="bott">Inhalt 4</div>

<div class="top_t" id="top_5">Titel 5</div>
<div id="bott_5" class="bott">Inhalt 5</div>

Das ist mein Ansatz bis jetzt :
Code: 
$(document).ready(function(){
$('.top_t').bind("click",function() {		
				$('.top_t').animate({
					width: "380px"
					},500,function()
						{	
							$(this).click(function(){
									$('.bott[name="' + $(this).attr('name') + '"]').removeClass("bott").addClass("selected").fadeIn('slow');
								
							}).next();
						}
				);
		}).next();
});

Das Problem hierbei ist halt eben, das der Div selected erst bei erneutem Klick auf den Div(Menü) geöffnet wird und nicht nach der Animation gleich der geklickte offen ist und der vorhergehende selected nicht fadeOut wird.




=============================
Code: 
$('.top_t').bind("click",function() {		
				$('.top_t').animate({
					width: "380px"
					},500
				);
		}).click(function()
						{		
							$('.selected').fadeOut('fast').addClass("bott").removeClass("selected");
							$('.bott[name="' + $(this).attr('name') + '"]').removeClass("bott").addClass("selected").fadeIn('slow');
						}).next();


Der Code macht zumindest schonmal was er soll.
Jedoch habe ich nun das Problem, das der geöffnete Div nicht schnell genug FadeOut ist.
Und wenn ich es in den Complete Pfad schreibe, geht es nicht, weil am Anfang nix zum FadeOut da ist.
 
Zuletzt bearbeitet:
Ich denke man muss nochmal drüber schauen ob da nicht das eine oder andere besser gemacht werden kann. Aber zumindest klappt es so:

CSS: 
<style>
.top_t {
	width:680px;
	border:1px solid #DDD;
	padding:15px 10px 15px 10px;
	display:block;
	margin-bottom:3px;
	color:#FFF;
	font-weight:bold;
	background-color:#bde18a;
	z-index: 1;
}

.selected {
	padding:10px;
	padding-top:20px;
	position: absolute;
	left: 0px;
	top: 0px;
	width:275px;
	min-height:190px;
	padding-top:5px;
	padding-bottom:5px;
	background-color:#EEEEEE;
	border:1px dashed #CCC;
	display: none;
	z-index: 0;
}
</style>

Javascript: 
$(document).ready(function(){

$('.top_t').click(function() {
	if (parseInt($(this).css("width")) > 380) {
		$('.top_t').animate({width : "350px"}, 500);
	}
	$('.selected').fadeOut(1000);
    $('#' + $(this).attr('id')).next().css("top", $(this).offset().top);
    $('#' + $(this).attr('id')).next().css("left", $(this).offset().left + 350);
    $('#' + $(this).attr('id')).next().fadeIn(1000);
});

});
HTML: 
<div class="top_t" id="top_1">Titel 1</div>
<div id="bott_1" class="selected">Inhalt 1</div>

<div class="top_t" id="top_2">Titel 2</div>
<div id="bott_2" class="selected">Inhalt 2</div>

<div class="top_t" id="top_3">Titel 3</div>
<div id="bott_3" class="selected">Inhalt 3</div>

<div class="top_t" id="top_4">Titel 4</div>
<div id="bott_4" class="selected">Inhalt 4</div>

<div class="top_t" id="top_5">Titel 5</div>
<div id="bott_5" class="selected">Inhalt 5</div>
 
Zuletzt bearbeitet:
Hey Ho,

erstmal vielen lieben dank das du mir soviel geholfen hast.
Ich muss echt sagen, du hast es drauf ;) dich sieht man hier überall und du hast immer nen guten Tipp.

Dein Beispiel funktioniert irgendwie bei mir nicht, aber du hast mich auf die Idee gebracht, wie es funktioniert.

Hier mal der ganze Code für andere:

Code: 
$('.top_t').bind("click",function() {		
				$('.top_t').animate({
					width: "380px"
					},500
				);
		}).click(function()
						{		
							$('.selected').fadeOut(0).removeClass("selected").addClass("bott");
							$('.bott[name="' + $(this).attr('name') + '"]').addClass("selected").removeClass("bott").fadeIn('slow');
						}).next();

HTML: 
.selected {
		padding:10px;
		padding-top:20px;
		float:right;
		width:275px;
		min-height:190px;
		padding-top:5px;
		padding-bottom:5px;
		//background-color:#EEEEEE;
		border:1px dashed #CCC;
		display:none;
	}
.top_t {
		width:680px;
		border:1px solid #DDD;
		padding:15px 10px 15px 10px;
		display:block;
		float:left;
		margin-bottom:3px;
		color:#FFF;
		font-weight:bold;
		background-color:#bde18a;
	}

<div style="float:left;width:50%;">  
	                <div class="top_t zensus" id="top_1" name="value1">
	                	Titel
	                </div>
 <div class="top_t zensus" id="top_2" name="value2">
	                	Titel
	                </div>
 <div class="top_t zensus" id="top_3" name="value3">
	                	Titel
	                </div>
</div>
<div style="float:right;width:50%;">	
	                <div id="bott_1" class="bott" name="value1">
	                		Text
	                	</div>
	                <div id="bott_2" class="bott" name="value2">
	                		Text
	                	</div>
	                <div id="bott_3" class="bott" name="value3">
	                		Text
	                	</div>
</div>

Der FadeOut mit 0 geht wunderbar.

Danke dir viel mals
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück