Div function ein- und ausblenden

mitstreiter · 02.02.2011

Hallo zusammen,

hab ein kleines Problem bzw. eine Frage zu Jquery. Ich hab verschiedene Elemente die durch klick ein-und ausgeblendet werden.

hier mal mein js-code:

PHP:

		$("#thumb1").click(function() {
		  function complete() {
			$("#shirtcontainer1").fadeIn("slow");
		  }
		  $("#thumbs").fadeOut(300, "linear", complete);
		});
		
		$(".close1").click(function() {
		  function complete() {
			$("#thumbs").fadeIn("slow");
		  }
		  $("#shirtcontainer1").fadeOut(300, "linear", complete);
		 });

und die demo dazu:

http://underground-germany.de/sonstiges/fade/

Mein Wunsch ist es jetzt für alle Container nur ein Script zu haben, denn sonst müsste ich das Script immer kopieren und die Nummerierungen wechseln.

Jemand ne Ahnung wie ich das lösen könnte?

Danke schonmal

.

fexx · 02.02.2011

AW: Div function ein- und ausblenden

das sollte das richtige für dich sein: .toggle() – jQuery API

SineTempore · 02.02.2011

AW: Div function ein- und ausblenden

Ich glaube das ist nicht ganz das was er sucht

Erzeugst du deine thumbs mit php? Sprich in einer Schleife?
Dann könntest du mit dem onclick-Attribut arbeiten.

PHP:

<div id="thumbs">
  <?php
    for($i = 0; $i < $containers.length; $i++)
    {
  ?>
      <div id="thumb<?php echo $i; ?>" onClick="showDetails(<?php echo $i; ?>);" >
        blablablabl
      </div>
  <?php
    }
  ?>
</div>

und dann halt noch eine entsprechende JS Methode. Quasi deine complete funktionen.
Hoffe du verstehst was ich meine

mitstreiter · 02.02.2011

AW: Div function ein- und ausblenden

Das Ding ist nicht, dass das ein- und ausblenden nicht gehen würde. Ich möchte eben das Script nicht 22 mal schreiben. Da ich 22+ Hauptcontainer hab und 22+ Divs mit Klickgrafik.

Edit: @SineTempore

mehr gehts eigentlich nur um die Jquery function. Die Thumbs sind statisch.

SineTempore · 02.02.2011

AW: Div function ein- und ausblenden

Wie gesagt, wenn dus mit PHP erzeugst kannst du relativ einfach den Containern eine eigene ID geben.
Und somit hättest du ja dann eine relativ einfache JS Funktion zu schreiben

PHP:

function showDetails(idNum) {
  $("#thumbs").fadeOut(300, "linear", function(){
    $("#shirtcontainer" + idNum).fadeIn("slow");
  });
}

analog dann hideDetails o.ä.

achso... ob das mit den scopes dann funktioniert weiß ich ned

kenn mich da bei JS nicht so aus ^^

EDIT: arg jetzt erst den edit gelesen. funktioniert allerdings auch beim statischen. dann musst du halt die nummerierung von hand machen.

EDIT2: das problem besteht ja eigentlich darin, dem onclick event klar zu machen welches div zu welchem thumb gehört. jetzt könntest du die divs einfach immer abwechselnd schreiben und dann mit $(this).next() arbeiten

EDIT3: Myhar hat die bessere Lösung

Myhar · 02.02.2011

AW: Div function ein- und ausblenden

Ich hoffe, mein Denkanstoß reicht mal fürs erste: Du hast ja #thumb[1-n] und blendest damit ja shirtcontainer[1-n] ein.
Da würde ich mal mithilfe der (document).ready von jQuery einfach alles dynamisch erzeugen. Und weil das gerade unlogisch erklärt ist von mir, ein kurzes Bsp:

Code:

$(document).ready(function() {
    // put all your jQuery goodness in here.
   i = 12 //Anzahl der Shirts
   while (i--) {
         jQuery("#thumb"+i).click(function() { 
            jQuery("#shirtcontainer"+i).fadeIn("slow"); 
          } 
          jQuery("#thumbs").fadeOut(300, "linear", complete); 
        }); 

       jQuery(".close"+i).click(function() { 
          function complete() { 
            jQuery("#thumbs").fadeIn("slow"); 
          } 
          jQuery("#shirtcontainer"+i).fadeOut(300, "linear", complete); 
         }); 
}
});

Ist aber nichtgetesteter Code, aber ich hoffe, das Prinzip ist klar.

L. G.

mitstreiter · 02.02.2011

AW: Div function ein- und ausblenden

Danke, teste ich später.

Muss erstmal weg

.

SineTempore · 02.02.2011

AW: Div function ein- und ausblenden

Da fällt mir ein... ich glaube mit der folgenden Lösung müsstest du nichtmal die Dinger durchnummerieren. Wichtig ist dann nur die Reihenfolge:
Bsp:
statt

Code:

i = 12;
while(i--){
  jQuery("#thumb"+i).click(function() {
    jQuery("#shirtcontainer"+i).fadeIn("slow");
    [...]

Code:

i = jQuery(".thumb").length;
while(i--) {
  jQuery(".thumb").eq(i-1).click(function() {
    jQuery("#thumbs").fadeOut(300, "linear", function(){
      jQuery(".shirtcontainer").eq(i-1).fadeIn("slow");
    });

analog beim close...

sokie · 02.02.2011

AW: Div function ein- und ausblenden

achtung:

Code:

    <div id="shirt">
        <img src="" width="380" height="380"/>
        <p>blablabla</p>
    </div>
    
       <div id="shirt">
        <img src="" width="380" height="380" />
        <p>blablabla</p>   </div>

id #shirt mehrmals vergeben.
____________

wenn du in einem Container mehrere thumbs hast, und du diese mit jQuery in eine Sammlung liest, zB $("#thumbscontainer img") bekommst du ein objekt mit allen thumbs, und kannst deine Programmierung per

Code:

jQuery.each($("#thumbscontainer img"),function(index){
  $(this).click(function(){
     //deine funktionen oder
    alert(index);
  });
});

aufbauen

http://api.jquery.com/jQuery.each/

mitstreiter · 03.02.2011

AW: Div function ein- und ausblenden

Guten Morgen Leute,

hab gestern und heute nochmal alles ausprobiert, nur passiert da bei mir nichts. Liegt vll auch daran dass wenn ich "#thumb+i" klicke und dann einen dieser "#shirtcontainer+i" aufgerufen werden soll, das Script nicht weiß, welcher Container geladen werden muss.

@sokie: die id "#shirt" wurde einmal vergeben, da der inhalt der gleiche ist, also das Bild im Container. Was du jetzt genau meinst, weiß ich nicht.

Gruß

Myhar · 03.02.2011

AW: Div function ein- und ausblenden

Achtung,

Code:

"#thumb+i" ist nicht das selbe wie "#thumb"+i

Im ersten Fall wird die id "thumb+i" gesucht, im zweiten Fall wird thumb1 bis thumbn gesucht (je nachdem, welchen Wert i hat)
Das selbe gilt natürlich auch für "#shirtcontainer" + i

L. G.

mitstreiter · 03.02.2011

AW: Div function ein- und ausblenden

Hi,

ja das ist mir schon klar. Wollte nur zum ausdruck bringen dass die Sachen zusammen gehören. im Script wird es natürlich "#thumb"+i geschrieben

.

sokie · 03.02.2011

AW: Div function ein- und ausblenden

mitstreiter schrieb:
@sokie: die id "#shirt" wurde einmal vergeben, da der inhalt der gleiche ist, also das Bild im Container. Was du jetzt genau meinst, weiß ich nicht.Gruß

das meine ich
das gleiche (und noch häufiger) hier:

mitstreiter · 03.02.2011

AW: Div function ein- und ausblenden

Hi sokie,

da der Inhalt sich nur ändert, hab ich dem Container die gleiche ID gegeben.

SineTempore · 04.02.2011

AW: Div function ein- und ausblenden

es geht darum, dass die ID eines Elements im DOM einzigartig sein muss. Was dir der W3C Validator auch bestätigt.

sokie · 04.02.2011

AW: Div function ein- und ausblenden

Wenn das ganze logisch und valide ist, ist es auch einfach zu schreiben.
du hast deine liste mit thumbs der shirts

Code:

<ul id="thumbs">
  <li><img /></li>
  <li><img /></li>
  <li><img /></li>
  <li><img /></li>
</ul>

dann deine shirtcontainer für die grosse Ansicht("Artikelansicht"):

Code:

<div class="shirtcontainer">
  *inhalte0
  <p class="close">close!</p>
</div>
<div class="shirtcontainer">
  *inhalte1
  <p class="close">close!</p>
</div>
<div class="shirtcontainer">
  *inhalte2
  <p class="close">close!</p>
</div>
<div class="shirtcontainer">
  *inhalte3
  <p class="close">close!</p>
</div>

jetzt kannst du einfach die thumbs per jQuery selektieren und mit deinem click-halndler bestücken (per each)

Code:

jQuery.each($("#thumbs img"), function(index){
  $(this).click(function(){
    $(".shirtcontainer:eq(" + index + ")").fadeIn();
    /*der aus dem geklickten thumb gewonnene index wird benutzt um das
        entsprechende shirtcontainer einzublenden*/
  });
});

der "closer" im .shirtcontainer bekommt seinen eigenen click-handler:

Code:

$(".close").css("cursor","pointer").click(function(){
  $(this).parents(".shirtcontainer").hide(); //oder fadeOut() oder css("display":"none")
});

das sollte es gewesen sein. Bedingung ist nur, dass die Anzahl und Reihenfolge der .shirtcontainer gleich der der "#thumbs img" ist.
*inhalte steht für alle inhalte deiner "Artikelansicht"

mitstreiter · 04.02.2011

AW: Div function ein- und ausblenden

Hi Sokie,

schau ich mir heute Abend an. Muss heute noch durch halb Deutschland

.

Danke schonmal!

mitstreiter · 05.02.2011

AW: Div function ein- und ausblenden

So,

habs jetzt mal umgeschrieben und getestet. Sokie, dein Script ist so geschrieben, dass die Thumbs da bleiben, habe deshalb das Script ein wenig umgebaut.

PHP:

jQuery.each($("#thumbs img"), function(index){
  $(this).click(function(){
			function complete() {
					$(".shirtcontainer:eq(" + index + ")").fadeIn();		  
						}
		  $("#thumbs").fadeOut(300, "linear", complete);
  });
});

Beim close gibt es jetzt natürlich das Problem, dass die Thumbs nicht mehr eingeblendet werden. Ich wollte das so lösen

PHP:

$(".close").css("cursor","pointer").click(function(){
				function complete() {
  $(this).parents(".shirtcontainer").fadeOut(); //oder fadeOut() oder css("display":"none")
				}
	$("#thumbs").fadeIn(300, "linear", complete);

});

Jetzt werden die Thumbs wieder eingeblendet, nur der Shirtcontainer nicht ausgeblendet

.

Die aktuelle Demo ist hier zu sehen >> http://underground-germany.de/sonstiges/fade/
.

Gruß

Doitsu · 05.02.2011

AW: Div function ein- und ausblenden

this zeigt in der complete-Funktion nicht mehr auf den close-Div, sondern auf #thumbs.
Ansonsten lasse sie doch einfach gleichzeitig ein & ausblenden - also nimm die complete Funktion raus. Wenn du das nicht willst, musst du die Funktion versetzt aufrufen. entweder mit jQuery - delay - oder mit der Javascript Funktion setTimeout()

mitstreiter · 05.02.2011

AW: Div function ein- und ausblenden

Keine Ahnung wie, aber es geht jetzt teilweise.

close-function

PHP:

$(".close").click(function(){
		function complete() {
			     $("#thumbs").fadeIn(300, "linear", complete);
		}
    			 $(this).parents(".shirtcontainer").fadeOut(300, "linear", complete); //oder fadeOut() oder css("display":"none")
});

Jetzt geht die Geschichte aber nur einmal. Danach geht nichts mehr... -.-