# JQuery Befehle



## lisali (26. Juli 2009)

Hallo,

ich hab folgenden Code, der mit JQuery bewirken soll, dass ein Klick auf einen Link mit der id "toggle1" einen bestimmten Div-Layer hoch- und runterschiebt:


```
$(document).ready(function()
{
	$("a#toggle1").click(function ()
	{
	$("div#1").fadeTo("slow", 0.2);
	$("div#1").slideToggle("slow");
	$("div#1").fadeTo("slow", 1);
    $("a#toggle1").toggle();
	});
	
	$("a#toggle2").click(function ()
	{
	$("div#2").fadeTo("slow", 0.2);
	$("div#2").slideToggle("slow");
	$("div#2").fadeTo("slow", 1);
    $("a#toggle2").toggle();
	});
...
```

Das funktioniert auch richtig gut, jedoch würde ich gerne diese Funktion irgendwie dynamischer machen. Wie man sehen kann, hat beim Klick auf <a id="toggle1"> dann z.B. der Div-Layer entsprechend "1" als id zugewiesen. Jetzt wollte ich jedoch, dass ich nicht für jedes weitere Toggle, dass ich dann im HTML bzw. body-Tag schreibe, das selbe wie oben machen und einzelnd zuweisen. Es sollte eben dynamisch sein.
Zudem wollte ich noch gerne verhindern, dass man durch übermäßiges Klicken auf diesen Link dauernd Datensätze abruft und damit die Datenbank unnötig belastet und deswegen diesen Link solange "disabled" machen, solange dieser fade-Effekt nicht abgeschlossen ist.

Kann mir dabei vielleicht jemand behilflich sein?

Wäre sehr sehr dankbar!


Liebe Grüße,

Lisa


----------



## Sven Mintel (27. Juli 2009)

Moin Lisa,

Mit einer leicht geänderten Wahl von ID(ein Zahl ist da eh nicht legitim), verbunden mit einem Klassennamen, lässt sich das gut umsetzen 


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script type="text/javascript">
  $(document).ready(function(){
    $("a.toggle").click(function ()
	    {
	      $("div#"+this.id+'_div').fadeTo("slow", 0.2)
	                              .slideToggle("slow")
	                              .fadeTo("slow", 1);
        $(this).toggle();
	    });
  });
  </script>
  <style type="text/css">
div.toggle{display:none;background:red;}
  </style>
</head>
<body>
<a id="toggle1" class="toggle">A#1</a>
<a id="toggle2" class="toggle">A#2</a>
<a id="toggle3" class="toggle">A#3</a>
<div id="toggle1_div" class="toggle">DIV#1</div>
<div id="toggle2_div" class="toggle">DIV#2</div>
<div id="toggle3_div" class="toggle">DIV#3</div>
</body>
</html>

</html>
```

Die Aktion wird auf alle Links mit dem Klassennamen* toggle* angesetzt:
	
	
	



```
$("a.toggle").click
```
Es wird die ID des Links ermittelt, dort *_div* herangehängt(das passende DIV zum Link #toogle1 hat also bspw. die ID *toggle1_div*)
	
	
	



```
$("div#"+this.id+'_div')
```
...das wars schon.


----------



## Quaese (27. Juli 2009)

Hi,

um den click-Event während der Animation zu unterbinden, könntest du folgendermassen vorgehen:

```
$(document).ready(function(){
  $("a.toggle").click(hFn=function (){
    var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').fadeTo("slow", 0.2)
                            .slideToggle("slow")
                            .fadeTo("slow", 1, function(){
                              $(_this).bind('click', fn);
                            });
      $(this).toggle();
    });
});
```
 
Der Event wird mit *unbind* zunächst vom Element genommen. In der callback-Funktion der letzten Animation wird er wieder hinzugefügt.

Ciao
Quaese


----------



## lisali (27. Juli 2009)

Dankeschön für eure Beiträge! Also, das hat mir geholfen, jedoch hab ich ein paar Fragen.

Ich würde gerne beim Klick auf den Link, diesen Link nicht verschwinden lassen, sondern in einen anderen umwandeln. Ich habe nämlich standardmäßig immer "(bild pfeil-nach-oben) zuklappen" und wenn man dann klickt "(bild pfeil-nach-unten) aufklappen" als Link da stehen.

Wie könnte ich das realisieren?

Bisher habe ich das so gemacht:


```
<a style="cursor:pointer;" id="toggle1" class="toggle">zuklappen <img src="img/icons/arrow_up.gif" /></a>
<a style="cursor:pointer; display: none;" id="toggle1" class="toggle">aufklappen <img src="img/icons/arrow_down.gif" /></a
```

Jedoch ist das nicht valide.

Liebe Grüße,

Lisa


----------



## Nord-Süd-Richtung (27. Juli 2009)

Hi

vielleicht nicht das beste aber es sollte funktionieren (kannst du dir ja anpassen  )

```
<a href="www.example.com" id="link1">Nach oben <img src="nachoben.png" alt="^" /></a>
<script type="text/javascript">
function changeLink(id,to,content){
  obj = document.getElementById(id);
  if( obj == null ) 
    return false;
  obj.href = to;
  obj.innerHTML = content;
}
changeLink('link1','www.google.com','Nach unten <img src="nachunten.png" alt="v" />');
</script>
```


----------



## Quaese (27. Juli 2009)

Hi,

du könntest das bisherige Script dahingehend abändern, dass die Bildquelle ausgetauscht wird, wenn die Animation abgeschlossen ist.

```
$(document).ready(function(){
  $("a.toggle").click(hFn=function (){
    var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').fadeTo("slow", 0.2)
                            .slideToggle("slow")
                            .fadeTo("slow", 1, function(){
                              var strSrc = (($(_this).find("img").attr("src").search(/arrow_up\.gif/)!=-1)? "arrow_down.gif" : "arrow_up.gif");
                            	$(_this).find("img").attr({
                              	src: strSrc
                              });
                              $(_this).bind('click', fn);
                            });
    });
});
```
 
Und der zugehörige HTML-Teil:

```
<a style="cursor:pointer;" id="toggle1" class="toggle">auf-/zuklappen <img src="arrow_up.gif" /></a>
<a style="cursor:pointer;" id="toggle2" class="toggle">auf-/zuklappen <img src="arrow_up.gif" /></a>
<a style="cursor:pointer;" id="toggle3" class="toggle">auf-/zuklappen <img src="arrow_up.gif" /></a>
<div id="toggle1_div" class="toggle">DIV#1</div>
<div id="toggle2_div" class="toggle">DIV#2</div>
<div id="toggle3_div" class="toggle">DIV#3</div>
```
 
Ciao
Quaese


----------



## lisali (27. Juli 2009)

Tut mir Leid, aber ich habe vergessen zu erwähnen, dass ich bei jedem Klick auf diesen <a>-Link diesen Link verschwinden lasse, deshalb kann ich jetzt auch gar nicht überprüfen bzw. wissen, ob das mit dem Bildwechsel klappt. Woran könnte das liegen, dass der Link beim Klick verschwindet?

Vielen Dank!

Liebe Grüße,

Lisa


----------



## Quaese (27. Juli 2009)

Hi,

für das Verschwinden ist

```
$(this).toggle();
```
verantwortlich. Wenn du meinen letzten Codeabschnitt betrachtest, wirst du feststellen, dass dieser Teil dort fehlt.

Ciao
Quaese


----------



## lisali (27. Juli 2009)

Ah, vielen Dank! Das funktioniert ja echt nahezu perfekt. Ich würde jetzt gerne nur noch den Text entsprechend "faden" lassen von "aufklappen" zu "zuklappen".

Ich hab das zuvor mit "display:none" gemacht im style-Attribut, aber das ist nicht XHTML valide gewesen, da ich eben auch 2 <a>-Links hintereinander stehen hatte und einer sozusagen versteckt war.

Was könnte ich da machen/erweitern, was auch valide ist?


----------



## Quaese (27. Juli 2009)

Hi,

verpacke die Texte in *span*-Tags. So kannst du sie gezielt ansprechen und deinen Anforderungen entsprechend modifizieren.

Beispiel:

```
$(document).ready(function(){
  $("a.toggle").click(hFn=function (){
  	var fn = hFn;
    var _this = this;
    $(this).unbind('click', fn);
    $("div#"+this.id+'_div').fadeTo("slow", 0.2)
                            .slideToggle("slow")
                            .fadeTo("slow", 1, function(){
                              var strSrc = strUpDown = "";
                              if($(_this).find("img").attr("src").search(/arrow_up\.gif/)!=-1){
                              	strSrc = "arrow_down.gif";
                                strUpDown = "aufklappen";
                              }else{
                              	strSrc = "arrow_up.gif";
                                strUpDown = "zuklappen";
                              }
                            	$(_this).find("img").attr({
                              	src: strSrc
                              });
                              $(_this).find("span").fadeTo('slow', 0, function(){
                              	$(_this).find("span").html(strUpDown).fadeTo('slow', 1);
                              });
                              $(_this).bind('click', fn);
                            });
    });
});
```
 
HTML:

```
<a style="cursor:pointer;" id="toggle1" class="toggle"><span>zuklappen</span> <img src="arrow_up.gif" /></a>
<a style="cursor:pointer;" id="toggle2" class="toggle"><span>zuklappen</span> <img src="arrow_up.gif" /></a>
<a style="cursor:pointer;" id="toggle3" class="toggle"><span>zuklappen</span> <img src="arrow_up.gif" /></a>
<div id="toggle1_div" class="toggle">DIV#1</div>
<div id="toggle2_div" class="toggle">DIV#2</div>
<div id="toggle3_div" class="toggle">DIV#3</div>
```
 
Ciao
Quaese


----------



## lisali (27. Juli 2009)

Hey, 

wow, das klappt echt super! Dankeschön!

Also, damit bin ich nun völlig zufrieden!

Mich interessiert jetzt nur noch eine andere Sache. Ich habe nämlich 3D-mäßige Buttons, die ich z.B. wie folgt schreibe:


```
<a class='click rb5' style='cursor:pointer'>
<spanstyle='background:url(img/icons/add.gif) no-repeat; padding-left:13px'>&nbsp;</span> Neues Bild hinzuf&uuml;gen
</a>
```

Also, da scheint die einzige Möglichkeit ein Bild in diesen Link einzubinden dieser Span-Tag zu sein. Und das wäre ja mit diuser Auf/-Zuklapp-Funktion, die ich nun habe nicht kompatibel.

Also, mein Ziel wäre eben folgendes (obiger Code):


```
<a class='click rb5' style='cursor:pointer'>
<span style='background:url(img/icons/add.gif) no-repeat; padding-left:13px'>&nbsp;</span> Neues Bild hinzuf&uuml;gen
</a>
```

in das umzuwandeln bei einem Klick und trotzdem diesen Div-Layer runter zu sliden (bzw. auf- oder zuzuklappen):


```
<a class='click rb5' style='cursor:pointer'>
<span style='background:url(img/icons/remove.gif) no-repeat; padding-left:13px'>&nbsp;</span> Kein Bild hinzuf&uuml;gen
</a>
```

Hier wird nämlich auch gleich der Text und das Bild im HTML geändert und nicht im Javascript selbst. Das wäre dann nämlich auch etwas dynamischer. Wäre das möglich irgendwie mit Modifizierung/Erweiterung jetziger Funktion!?


Liebe Grüße und vielen Dank nochmal!

Lisa

Edit: So sieht dieser Button aus, allein erzeugt aus diesem <a>Tag und wie erwähnt mit dem <span>, was ich gerne beibehalten würde, da es die HTML-Arbeit echt vereinfacht:


----------

