Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

:: RK :: · 25-07-2009, 08:15

hi,

also seit gestern beschäftige ich mich mit jQuery. Sehr cooles Framework/Toolkit
(wie auch immer man es nennen möchte). Ich hab auch schon mein erstes Problem

Also ich hab n HTML Formular. Es werden mehrfach <fieldset> Elemente
verschachtelt, welche ich per Klick auf das <legend> Element schließen und
öffnen möchte.

Ich dachte, dass sich JS wie AS arbeitet und dass sich das this in JS genau
wie in AS auf das jeweilige Element bezieht, in dem es angesprochen wird.
Aber weit gefehlt!

Was ich erreichen möchte:
Jedes <legend> Element mit der CSS Klasse toggle-nav soll bei MouseClick
das interne <div> mit der Klasse toggle-view öffnen/schließen können.

Aber es wäre ja schlecht programmiert wenn ich das für jedes <legend>
Element manuell programmieren würde, also soll das JS Script automatisch
erkennen welches <legend> Element ich angeklickt habe und dann das
dazugehörige <div> finden und toggeln.

Da ich das mit dem this fehlinterpretiert habe wird jetzt, egal ob ich auf das
oberste <legend> (Oberste Stufe - Level 0) oder auf eines der verschachtelten
<legend>s (Erste Stufe - Level 1) klicke, immer das gesamte Formular
geschlossen. Es wird also immer das <div> Element in der obersten Stufe
angesprochen.

Was mache ich falsch?

Worauf bezieht sich denn das this in meinem Script? Etwa auf document?

Hier mein Code (habs mal mit dem jquery code zum testen angehängt):

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
      <title>jQuery Test</title>
      <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $("legend.toggle-nav").click(function(event){
               $("div.toggle-view:first", this.parent).slideToggle("slow");
            });
         });
      </script>
   </head>
   <body>
      <div id="form-container">
         <form onsubmit="void(0)" action="" method="get">
            <fieldset>
               <legend class="toggle-nav"><span>Oberste Stufe - Levl 0</span></legend>
               <div class="toggle-view">
                  
                  <fieldset>
                     <legend class="toggle-nav"><span>Erste Unterstufe - Level 1</span></legend>
                     <div class="toggle-view">
                        <fieldset>
                           <legend><span>Headline</span></legend>
                              <ul>
                                 <li><label><input type="checkbox" name="first-option" value="first"/>Erste Option</label></li>
                                 <li><label><input type="checkbox" name="second-option" value="second"/>Zweite Option</label></li>
                              </ul>
                        </fieldset>
                     </div>
                  </fieldset>
                  
                  <fieldset>
                     <legend class="toggle-nav"><span>Erste Unterstufe - Level 1</span></legend>
                     <div class="toggle-view">
                        <fieldset>
                           <legend><span>Headline 2</span></legend>
                              <ul>
                                 <li><label><input type="checkbox" name="first-option" value="first"/>Erste Option</label></li>
                                 <li><label><input type="checkbox" name="second-option" value="second"/>Zweite Option</label></li>
                              </ul>
                        </fieldset>
                     </div>
                  </fieldset>
                  
               </div>
            </fieldset>
         </form>
      </div>
   </body>
</html>

Edit:
Hab jetzt noch weiter rumprobiert und irgendwie zeigt das this doch auf das Element, welches angeklickt wurde.
Aber warum funktioniert mein Script nicht?!

Nightflyer · 25-07-2009, 12:40

Also

Mit $() machst du ein JQuery-Objekt. In der Klammer ist nur der Selektor ( http://docs.jquery.com/Selectors ) erlaubt (oder aber this oder ein AJAX-Return). Das Komma und alles dahinter welches du gemacht hast wird IMHO einfach ignoriert. Mit this kannst du auf das geklickte Element zugreifen, das hast du bereits gemerkt, allerdings musst du, damit du wiederum mit jQuery arbeiten kannst, this ebenfalls in der $()-Klammer stehen. Das Objekt, welches du anklickst heisst also $(this). Damit kannst du nun machen was du möchtest. Eine Ebene höher ist laut JQuery parent('fieldset') und das div das du öffnen/schliessen willst darin wiederum children('div').

Also alles in allem

Code:

			$(document).ready(function(){
				$("legend.toggle-nav").click(function(event){
					$(this).parent('fieldset').children('div').slideToggle("slow");
				});
			});

:: RK :: · 25-07-2009, 12:54

Zitat:

Zitat von Nightflyer

Also

Mit $() machst du ein JQuery-Objekt. In der Klammer ist nur der Selektor ( http://docs.jquery.com/Selectors ) erlaubt (oder aber this oder ein AJAX-Return). Das Komma und alles dahinter welches du gemacht hast wird IMHO einfach ignoriert. Mit this kannst du auf das geklickte Element zugreifen, das hast du bereits gemerkt, allerdings musst du, damit du wiederum mit jQuery arbeiten kannst, this ebenfalls in der $()-Klammer stehen. Das Objekt, welches du anklickst heisst also $(this). Damit kannst du nun machen was du möchtest. Eine Ebene höher ist laut JQuery parent('fieldset') und das div das du öffnen/schliessen willst darin wiederum children('div').

Also alles in allem

Code:

			$(document).ready(function(){
				$("legend.toggle-nav").click(function(event){
					$(this).parent('fieldset').children('div').slideToggle("slow");
				});
			});

Killa!!! Tausend Dank!

Ich bin ja n komplett falschen Ansatz gegangen!

Nicmare · 25-07-2009, 14:24

Zitat:

Zitat von Nightflyer

Also alles in allem

Code:

			$(document).ready(function(){
				$("legend.toggle-nav").click(function(event){
					$(this).parent('fieldset').children('div').slideToggle("slow");
				});
			});

ungetestet:

Code:

			$(document).ready(function(){
				$("legend.toggle-nav").click(function(event){
					$(this).next().slideToggle("slow");
				});
			});

:: RK :: · 25-07-2009, 14:36

Zitat:

Zitat von Nicmare

ungetestet:

Code:

			$(document).ready(function(){
				$("legend.toggle-nav").click(function(event){
					$(this).next().slideToggle("slow");
				});
			});

Das is auch gut, aber dann muss ich davon ausgehen, dass das <div> gleich
nach dem <legend> Element kommt. Könnte vielleicht Probleme machen.
Aber danke für den Tipp!

bjoern · 28-07-2009, 20:54

Das wäre auch gegangen...

HTML-Code:

$(document).ready(function(){
	$("legend.toggle-nav").click(function(event){
		$("div.toggle-view:first", $(this).parent()).slideToggle("slow");
	});
});

greetz,

bjoern

Nightflyer · 28-07-2009, 21:46

danke Björn, wieder was gelernt

25-07-2009, 12:40	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Also Mit $() machst du ein JQuery-Objekt. In der Klammer ist nur der Selektor ( http://docs.jquery.com/Selectors ) erlaubt (oder aber this oder ein AJAX-Return). Das Komma und alles dahinter welches du gemacht hast wird IMHO einfach ignoriert. Mit this kannst du auf das geklickte Element zugreifen, das hast du bereits gemerkt, allerdings musst du, damit du wiederum mit jQuery arbeiten kannst, this ebenfalls in der $()-Klammer stehen. Das Objekt, welches du anklickst heisst also $(this). Damit kannst du nun machen was du möchtest. Eine Ebene höher ist laut JQuery parent('fieldset') und das div das du öffnen/schliessen willst darin wiederum children('div'). Also alles in allem Code: $(document).ready(function(){ $("legend.toggle-nav").click(function(event){ $(this).parent('fieldset').children('div').slideToggle("slow"); }); }); __________________ (\__/) (='.'=) (")_(") Geändert von Nightflyer (25-07-2009 um 12:42 Uhr)

28-07-2009, 20:54	#6 (permalink)
bjoern scriptalizer Registriert seit: Jul 2001 Ort: sol.earth.de["Obertshausen"]; Beiträge: 39	Das wäre auch gegangen... HTML-Code: $(document).ready(function(){ $("legend.toggle-nav").click(function(event){ $("div.toggle-view:first", $(this).parent()).slideToggle("slow"); }); }); greetz, bjoern __________________ ~ :!find / -name Adobe* -exec rm -rdf {} \; jQuery User Group Frankfurt - @jqueryfra JavaScript User Group Frankfurt - @jsugfra

28-07-2009, 21:46	#7 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	danke Björn, wieder was gelernt __________________ (\__/) (='.'=) (")_(")

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln