kostenloser Webspace werbefrei: lima-city


Frage zu jQuery Selektoren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. f*******r

    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 ?
  4. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    Ja genau.

    Ich hab noch nicht weitergemacht, konnte mir die Fragen aber bisher auch noch nicht selbst beantworten.
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    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
  6. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    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.
  7. sallyundchamp

    sallyundchamp hat kostenlosen Webspace.

    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....
  8. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    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?
  9. sallyundchamp

    sallyundchamp hat kostenlosen Webspace.

    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
  10. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    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.
  11. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Wie wärs mit sowas?
    $(this).parent().next('div.seasonEpisodes').slideToggle(200);
    Natürlich ist der Code ungetestet…
  12. Autor dieses Themas

    h4nni

    h4nni hat kostenlosen Webspace.

    Crass. Geht. Wie kommt man auf sowas? Erfahrung? ...parent. Das klingt ja logisch aber man man man


    Danke Jungs. Thema geklärt. Übung macht den Meister dachte ich. Aber ich werde wohl noch einmal Tutorials durchackern müssen bevor ich meine eigenen Sachen mache.
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!