Frage zu jQuery Selektoren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
boxen
code
dank
denkfehler
display
element
episode
funktion
gerade vorstellen
gesuchte tag
gleiche element
jung
klappe
meister
ordner
plusminus
sauber check
tag
url
-
Hallo. Ich versuche mich gerade mal in jQuery, aber so richtig tag/funktion">funktionieren will es noch nicht. Ich glaube mir fehlt noch ein einfaches Verständnis dazu. Mal sehen wo mein Denkfehler ist. Also ich möchte ganz simpel meine Klappboxen (Seasons einer Serie als Überschrift und die dazugehörigen Episoden in der Klappbox) auf und zuklappen und dazu noch ein "Plus-Minus" Icon wechseln lassen. Nun scheitere ich schon an der Selection der Objekte. Dazu noch, es gibt mehrere "Season-Ordner", also mehrere Klappboxen.
1. ".klappe" ist in dem gesuchte <a> Tag. Wenn ich $('a .klappe') schreibe geht es nicht, ohne a schon. Warum?
2. Ich möchte mit dem zweiten Selektor das Bild in dem <a> Tag auswählen. $(this > 'img') geht aber nicht.
3. Durch den letzten Selektor soll die div-Box nach dem <a> Tag ausgewählt werden und ein und ausgeklappt werden. Aber läuft nicht ...
Ich les hier noch weiter aber so langsam glaub ich dass ich irgendetwas falsch verstanden habe.
jQuery
$(document).ready(function() { $('.klappe').click(function(){ var plusminus = $(this > 'img'); console.log(plusminus); plusminus.css("display", "none"); $(this).next('div .seasonEpisodes').slideToggle(200); return false; }); });
HTML
<div class="season"> <a href="#" id="season_467" class="klappe"> <img id="pic_467" alt="+/-" src="gfx/minus.png"> Season 5 </a> <a href="start.php?season_id=467#serie_6" name="season_467"> <div class="checkSeason"> <input type='checkbox' value='1'> Blabla </div> </a> </div> <div id="Lay467" class="seasonEpisodes"> [...] </div>
Ich würde mich sehr über eine Antwort freuen!
Beitrag zuletzt geändert: 14.8.2013 11:54:34 von h4nni -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
h4nni schrieb:
1. ".klappe" ist in dem gesuchte <a> Tag. Wenn ich $('a .klappe') schreibe geht es nicht, ohne a schon. Warum?
Meinst du damit, dass <a> die klasse .Klappe hat ? -
Ja genau.
Ich hab noch nicht weitergemacht, konnte mir die Fragen aber bisher auch noch nicht selbst beantworten. -
Könnte es sein, dass da so manches Leerzeichen ganz eigenartige Effekte zu Tage bringt?
Das Bild bekommst du übrigens so:$('.klappe').click(function() { var plusminus = $(this).find('img'); …
Beitrag zuletzt geändert: 15.8.2013 12:31:32 von hackyourlife -
Danke. Das Bild mit .find hat funktioniert. Weißt du auch wieso das nicht mit dem ">" ging?
Meinst du mit dem Leerzeichen den hier: 'div .seasonEpisodes'
Ich meine, so hab ichs gelernt. Nur es geht weder mit oder ohne Leerzeichen, nur wenn ich .div weglasse. Die Funktion an sich klappt aber, wenn ich alle div Boxen selektiere.
$('div .seasonEpisodes').slideToggle(200);
Es soll aber nur die darauf folgende geöffnet werden. -
ganz einfach es gibt ein unterschied zwischen "a.klappe" und "a .klappe"
das erste sagt aus das das Element a der Class klappe angehörig ist
das zweite sagt aus das es in dem Element a ein Element mit einer Class klappe gibt und man dieses oder diese haben will
also
$('a.klappe').click(func....
anstatt
$('a .klappe').click(func.... -
OK sauber. Check.
Weißt du auch eine Lösung für das zweite Problem? Ich könnte mir gerade vorstellen das ".next "nur Elemente auf gleicher oder einer tieferen Ebene nimmt. Das gesuchte DIV aber eine Ebene höher liegt. Kann das sein? -
wenn Du nur
$('.next')...
machst werden davon alle Elemente betroffen die der Class next angehören egal wo sie sich befinden
ansonsten arbeitet das alles so ähnlich wie bei CSS
also kannst Du auch <, > oder anderes nutzen
wenn Du allerdings immer das gleiche Element damit ansprichst, also nicht mehrere oder verschiedene der Class würde ich empfehlen id zu benutzen anstatt Class da Du dort eine eindeutige Zuordnung hast -
Das löst leider nicht das Problem. Ich meinte wie oben beschrieben die Funktion "next", mit der die DIV Box nach dem <a> Link getoggled werden soll. Wenn ich nur die Klasse anspreche werden wie du gesagt hast alle angesprochen. Aber ich möchte ja nur das darauffolgende (so wie oben mit find). Also folgendes klappt leider so nicht:
$(this).next('div .seasonEpisodes').slideToggle(200);
Danke schon mal für deine Hilfe. Geht so langsam voran. -
Wie wärs mit sowas?
$(this).parent().next('div.seasonEpisodes').slideToggle(200);Natürlich ist der Code ungetestet… -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
