mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: So 28.04.2024 19:26 Benutzername: Passwort: Auto-Login

Thema: jQuery - open/close Link erstellen vom 10.12.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery - open/close Link erstellen
Autor Nachricht
buchstabensuppe
Threadersteller

Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht: Männlich
Verfasst Do 10.12.2009 12:02
Titel

jQuery - open/close Link erstellen

 Antworten mit Zitat Zum Seitenanfang
Moin.

Ich bin noch nicht so im Thema, daher brauche ich mal eure Hilfe bzw. einen Ansatz.

Ich habe eine Reihe von DIV-Containern untereinander, jeder verfügt über eine eigene, fortlaufende ID.
Um diese auf- und zuklappen zu können steht vor jedem Container ein Link:
Code:
echo "<a id="(id des containers)" class="open_details"></a>


Über den name-Tag vom Link blende ich im jQuery-Script die jeweiligen Container ein.
Code:
$(".open_details").click(function(){
   $("#details_"+this.id+"").show("fast");
});


Nun besteht zur buttonswitch-Klasse open_details das Pondon close_details.
Da ich nur einen Link zum Öffnen und Schließen möchte, sollen sich die Klassen beim Klick tauschen.

Wenn ich mit removeClass und addClass arbeite ändert er zwar die Klasse,
allerdings greift die click-function von jQuery nicht.


Danke im Vorraus.

Zuletzt bearbeitet von buchstabensuppe am Do 10.12.2009 12:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Do 10.12.2009 12:27
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
$(function() {
        var containerPrefix = 'container-';
        var openCloseLinks = $('.open_details');
        var closeClass = 'close_details';

        if(openCloseLinks.length>0) {
                for(i=0;i<openCloseLinks.length;i++){
                       
                   openCloseLinks[i].click(function(){
                        currentContainer =   $("#" + containerPrefix + i);
                        if($(this).hasClass(closeClass)) {
                                currentContainer.hide("fast");
                        } else {
                                currentContainer.show("fast");
                        }
                        $(this).toggleClass(closeClass)
                   })     
                }
        }
});

Code:

<a href="#" class="open_details"></a>
<div id="container-0">
<p>Inhalt</p>
</div>
<a href="#" class="open_details"></a>
<div id="container-1">
<p>Inhalt</p>
</div>


(ungetestet)

Zuletzt bearbeitet von sahnemuh am Do 10.12.2009 12:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
buchstabensuppe
Threadersteller

Dabei seit: 14.09.2004
Ort: Wuppertal
Alter: 40
Geschlecht: Männlich
Verfasst Do 10.12.2009 12:33
Titel

Antworten mit Zitat Zum Seitenanfang
Super, danke für die schnelle Antwort!

Habe in der Zwischenzeit etwas anders gelöst.
Der Link ist nun ein Bild und beim onclick lese ich den src aus. Per if-Abfrage lasse ich ihn dann den src wechseln und blende den Container ein oder aus.
  View user's profile Private Nachricht senden
 
Ähnliche Themen jQuery Link in Liste ansprechen
einzelenen link mit jquery ansprechen
[Javascript|jQuery] Bestimmten Link aus Liste verändern
JQuery Bilder Slider erstellen
upload Link erstellen
Link dynamisch erstellen
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB