JQuery Befehle

lisali

lisali

Erfahrenes Mitglied
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:

Code: 
$(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
 
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 :)

Code: 
<!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:
Code: 
$("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)
Code: 
$("div#"+this.id+'_div')
...das wars schon.
 
Hi,

um den click-Event während der Animation zu unterbinden, könntest du folgendermassen vorgehen:
Code: 
$(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
 
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:

Code: 
<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
 
Hi

vielleicht nicht das beste aber es sollte funktionieren (kannst du dir ja anpassen ;) )
Code: 
<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>
 
Hi,

du könntest das bisherige Script dahingehend abändern, dass die Bildquelle ausgetauscht wird, wenn die Animation abgeschlossen ist.
Code: 
$(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:
Code: 
<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
 
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
 
Hi,

für das Verschwinden ist
Code: 
$(this).toggle();
verantwortlich. Wenn du meinen letzten Codeabschnitt betrachtest, wirst du feststellen, dass dieser Teil dort fehlt.

Ciao
Quaese
 
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?
 
Hi,

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

Beispiel:
Code: 
$(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:
Code: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück