JS function und jQuery

[nietaL]

Hey Leute,

ich bekomm die Syntax nicht gepacken. Folgendes funktioniert hervorragend:

[src=javascript]onclick function klappen_politik();

<script>
function klappen_politik()
{
$("#politik").animate({"height": "toggle"}, { duration: 500 });
}
</script>[/src]

Ich möchte die Funktion nun aber für weitere Themen öffnen:

[src=javascript]onclick function klappen('poltik');

<script>
function klappen(thema)
{
XXXXXXX.animate({"height": "toggle"}, { duration: 500 });
}
</script>[/src]

Wie muss die Syntax an der XXXXXXXX-Stelle lauten? Ich krieg es einfach nicht hin, dass er es als Variable und nicht als ID interpretiert.

 

[epiphora]

Wenn es für den übergebenen Parameter thema ein Element mit entsprechender ID gibt, kannst Du es einfach so machen:
[src=javascript]function klappen(thema)
{
$('#' + thema).animate({"height": "toggle"}, { duration: 500 });
}[/src]

 

[nietaL]

oh mann, erschreckend logisch. ich danke dir. funktioniert. Können dieses per jQuery gesetzten Eigenschaften eigentlich auch per if abgerufen werden? Da es serverseitig ist, schlägt es sich ja auf den Quelltext nicht nieder, richtig? Wo werden die Eigenschaften gespeichert? Hier wird ja die HEIGHT geTOGGLEt. Wo steht, wie HEIGHT aktuell gesetzt ist?

 

[epiphora]

Da es serverseitig ist, schlägt es sich ja auf den Quelltext nicht nieder, richtig?

Du meinst sicher clientseitig. Welchen Wert ein Attribut eines Elements oder welche Style-Eigenschaften es aktuell hat, kannst Du zum Beispiel über Firebug für Firefox oder über die Chrome Developer Tools herausfinden.

Toggle ist hierbei kein echter Wert, der zugewiesen wird, sondern lediglich ein Shortcut zum Umschalten. Näheres dazu steht in den jQuery-Docs: http://api.jquery.com/animate/#animation-properties

 

[nietaL]

natürlich clientseitig ....

Also kann in einem head-javascript gar nichts einbinden, was per if-Abfrage den derzeitigen Status abfragt?

[src=javascript]function klappen(thema)
{
$('#' + thema).animate({"height": "toggle"}, { duration: 500 });

$("#picOne").fadeToggle("slow");
$("#picTwo").fadeToggle("slow");
}[/src]

Der erste Teil öffnet bzw. schließt die jeweilige Themenbox.

Automatisch wird dann ein Hintergrundbild abgedimmt bzw wieder eingeblendet.

So macht das ganz noch wenig Sinn. Ziel ist, dass das Hintergrundbild gedimmt bleibt, solange auch nur eine Themenbox aufgeklappt ist. Geht das?

Auf die Bilder klicken: http://www.successi.de/_COMMENTARII/

 

[epiphora]

Doch, das geht natürlich. Unabhängig davon, wo der Code für Dein Javascript steht.

Dann solltest Du aber besser nicht mit toggle arbeiten, sondern die Abfragen einzeln machen und den Hintergrund dann entsprechend verdunkeln.

Möglich ist alles, vielleicht wäre es besser, wenn Du Dich mal mit den Javascript-Grundlagen vertraut machst und Dir die Funktionsweise von jQuery ein wenig verdeutlichst.

 

[LemonDrops]

@nietaL: kleiner Tipp für Js.

Schlechte Idee:
[src=javascript]
function ()
{
/* ... */
}
[/src]

Gute Idee:
[src=javascript]
function () {
/* ... */
}
[/src]


Die Geschweifte Klammer eines Codeblock gehört noch mit auf die Selbe Zeile, dass es in diesem Fall eine Funktion ist, ist willkürlich. Javascript setzt fehlende Semikolons automatisch. Darum kann so etwas passieren:


Funktioniert wie erwartet:
[src=javascript]
function (){

return {
foo:'bar'
}
}
[/src]

Funktioniert nicht wie erwartet:
[src=javascript]
function (){

return
{
foo:'bar'
}
}
[/src]

Es gibt also nur einen weg den Code Systematisch gleich zu schreiben.