Frage zu jquery?

[Maik20]

Hallo,

ich bastel gerade etwas mit jquery herum. Komme aber nicht so recht weiter. Vielleicht kann mir hier jemand helfen?

Mit folgendem Code:

$(document).ready(function(){
	$("#menu ul.nav li a#myAccount").click(function() {
		// ul#myOptions is the hidden list
		$("#menu ul.nav ul#myAccountMenu").toggle();
		$(this).toggleClass("active");
		return false;
	});
});

Öffne ich ein Menu beim click auf den link <li><a href="#" id="myAccount">Account</a></li> ein Menü. Nun müsste ich für jeden li Punkt den obigen Code wiederholen, wenn ich z.B. weitere Menüs einbinden möchte. Wie kann ich den Code so ändern, dass bei einem
Klick auf:

$("#menu ul.nav li a#XXX").click(function() {

Immer das Menü:

$("#menu ul.nav ul#XXXMenu").toggle();

geöffnet wird.

Hat dazu jemand eine Idee?. Sonst müsste ich für 10 Menüpunkte den Javascript code erstellen. Das wäre die weniger elegante Lösung.

 

[rd4eva]

Ich glaube du solltest dir die Selektoren bzw. deren Funktionweise nochmal zu gemüte führen. Das wirkt alles nicht so als hättest du es verstanden.
Binde den click-Handler ganz einfach an mehrere Elemente. Dann liest du die id des jeweils angeklickten Elements aus und setzt sie als Variable im Selektor der toggle Funktion ein.

 

[Maik20]

Danke,

da hast du wohl recht. Die Selektoren hatte ich wirklich noch nicht richtig verstanden. Nachdem ich mir die Doku noch einmal näher angesehen habe, würde ich nun folgendes machen:

Ich verpasse allen Menüpunkten die Klasse "myMenu" und kann dann über den Class-Selektor auf die Klasse zugreifen etwa so:

<li class="myMenu" id="id1"><a href="">Menu1</a></li>
<li class="myMenu" id="id2"><a href="">Menu2</a></li>
<script>
$(document).ready(function(){
    $(".myMenu").click(function() {
        ****?
        return false;
    });
}); 
</script>

Sag mir bitte ob das soweit richtig ist.

Nur wie komme ich jetzt an die id des geklickten Menüpunkts um diese zu übergeben?

 

[CPoly]

Die Selektoren haben nicht unbedingt etwas mit der jQuery Dokumentation zu tun oder überhaupt mit JavaScript. Du solltest dich unbedingt mit CSS genauer auseinandersetzen, denn dann fällt es dir viel leichter z.B. mit jQuery die Elemente auszuwählen, welche du suchst. Aber das hat rd4eva ja bereits gesagt.

Um deine Frage zu beantworten:

****?
//ersetzen durch
alert(this.id);

Aber du hättest nicht jedem Element die Klasse zuweisen müssen (Das widerspricht dem Ziel, dass man mit jQuery und anderen Frameworks verfolgt: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript). Das wirst du sicher merken, nach dem du dich mit CSS oder zumindest CSS-Selektoren beschäftigt hast.

 

[Maik20]

Danke für den Tip.

Hast du für mich ggf. einen guten Link bzgl. der Selektoren auf Deutsch?

Ich habe in JQuery mehrere Möglichkeiten z.B. wie hier ein click Event zuzuweisen.
1) Über die ID
Da die ID einzigartig ist, würde dies bedeuten ich müsste die JQuery Funktion für jede ID einzeln schreiben
2) Über einen Pfad z.B. ul.topnav > li ...
Dann müsste ich bei der Änderung des HTML Codes immer die JavaScript-Funktion anpassen. Wenn z.B. die Topnav keine Aufzählung mehr ist.
3) Über die Klassen.

Letzteres fand ich am flexibelsten. Ich lasse mich aber gerne eines besseren belehren, daher würde ich mich über einen guten Link freuen.

 

[CPoly]

Ich hab leider keinen Link parat.

Ich verstehe deine Überlegung bei Punkt 2) nicht ganz. Wie oft änderst du denn dein HTML? Und selbst wenn du es ständig ändern würdest, wäre es doch einfacher einen einzigen Selektor zu ändern (z.B. aus "li" wird "div") anstatt eine Klasse einzuführen, die einzig den Zweck erfüllt, sie via JavaScript anzusprechen. Diese müsstest du jedes mal dazu schreiben, was deinen Quelltext unnötig aufbläht. Das kann auch durchaus mal Sinn machen, aber in einem Fall denke ich eher nicht.

So in etwa würde ich das aus deinem Startpost umsetzen, sofern ich die Anforderung richtig verstanden habe.

$("#menu a").click(function() {
    $(this).parent("ul").toggle();
}

Aber so 100% Sinn macht es noch nicht. Du müsstest vielleicht mal mehr als diese eine Zeile HTML preis geben.