[jQuery] Funktion geht mit id-Selektor, aber nicht mit class-Selektor

  • Hallo,
    ich hoffe ich bin hier im richtigen Forum, aber hier waren ja schon Themen mit ähnlichen Anliegen.
    Meins:
    Ich habe auf einer Seite in Wordpress einen Link, bei dessen Anklicken ein Text mit mehr Informationen per jQuery slideToggle eingeblendet werden soll. Dazu habe ich eine Funktion geschrieben, die aufgerufen wird und das funktioniert auch.
    Nun möchte ich aber auch, dass sich der Textlink von "mehr..." in "weniger..." verändert. Dazu habe ich eine weitere Funktion geschrieben. Diese funktioniert jedoch nur, wenn ich die gewünschten spans mit # selektiere. Ändere ich alle IDs in Klassen, damit ich die Funktion mehrmals und an verschiedenen Stellen benutzen kann, dann funktioniert es nicht.

    Ich habe diese beiden Funktionen in einem externen js-File, welches ich über den HTML-Header-Insert im Atahualpa-Theme in den Header wie folg einbinde:

    PHP
    <?php wp_enqueue_script( 'crew',  plugins_url($path = 'wp-includes/js/crew.js'), array('jquery') ); ?>

    Diese Datei sieht dann so aus:

    Wenn in der zweiten Funktion alle "." in "#" und alle "class" in "id" geändert werden und mein Link so aussieht:

    Code
    <a id="link_ralf" class="crewmitglied" onclick="return false;" href="#"><span id="mw"><span id="mehrweniger" title="mehr">mehr...</span></a>

    dann geht es bei diesem ersten Link einwandfrei, aber logischerweise bei keinem anderen.
    Hab ich jedoch den Link so:

    Code
    <a id="link_ralf" class="crewmitglied" onclick="return false;" href="#"><span class="mw"><span class="mehrweniger" title="mehr">mehr...</span></a>

    und die Funktion wie oben angegeben. Dann funktioniert nur der slideToggle, sonst nichts.

    Überseh ich irgendwas oder denke falsch??

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Probier es mal so. Die globale Variable stat kann auf jeden Fall weg, das kann mit mehreren Links ja nicht gehen (die klappen ja nicht alle gleichzeitig auf, oder?). Das innere span kann auch weg, es sei denn es erfüllt noch vom Design her einen dringend nötigen Zweck.

    Code
    jQuery('.mw').click(function () {
      var title = this.getAttribute('title');
      if (title == 'weniger') {
        jQuery(this).replaceWith('<span class="mw" title="mehr">mehr...</span>');
       } else {
       jQuery(this).replaceWith('<span class="mw"  title="weniger">weniger...</span>');
       }
         });

    HTML also so:

    Code
    <a id="link_ralf" class="crewmitglied" onclick="return false;" href="#"><span class="mw" title="mehr">mehr...</span></a>
  • Funktioniert leider auch nicht. Mit dem title-Tag hatte ich es schon probiert, war auch mein Anfangsgedanke, jedoch funktioniert das seltsamerweise auch nicht, weil jQuery höchstwahrscheinlich nicht auf das aktualisierte DOM zugreift nach dem Aufruf.
    Jedoch hatte es bei mir zumindest einmal funktioniert, jetzt funktioniert es gar nicht. Da hatte ich das Script aber noch direkt mit im html-Quelltext gehabt.

    Was mich auch noch wundert ist, dass wenn ich irgendwo im Script ein alert() einbaue, um mir eine Variable testweise ausgeben zu lassen, dieses auch nie funktioniert...

    :confused:

  • Zitat

    Funktioniert leider auch nicht. Mit dem title-Tag hatte ich es schon probiert, war auch mein Anfangsgedanke, jedoch funktioniert das seltsamerweise auch nicht, weil jQuery höchstwahrscheinlich nicht auf das aktualisierte DOM zugreift nach dem Aufruf.

    Hm, ne, daran kann es nicht liegen. Erstens lese ich das title-Attribut in obigem Code gar nicht über jQuery aus und zweitens ist jQuery ja genau dafür da.


    Zitat

    Was mich auch noch wundert ist, dass wenn ich irgendwo im Script ein alert() einbaue, um mir eine Variable testweise ausgeben zu lassen, dieses auch nie funktioniert...

    Dann würde ich im Moment mal drauf tippen, dass irgendwo vorher ein JavaScript-Fehler passiert und die Script-Bearbeitung abgebrochen wird. Kann das sein? Zeigt der Browser irgendwelche Fehler an? Hast Du bei den Alerts übrigens die Seite mal ohne Cache neugeladen (Strg+F5)? Nicht dass der Browser nur die alte Version gecacht hat.

    Einmal editiert, zuletzt von Ammaletu (30. Juni 2010 um 17:07)

  • Es zeigt eben in der Fehlerkonsole keinen Fehler an und das Auf- und Zuklappen funktioniert auch weiterhin.
    Hab es auch eigentlich immer mit mehrmaligem Neuladen probiert. Jetzt nicht direkt mit Strg+F5 aber eben aktualisiert. Der Quelltext hat sich ja auch immer so verändert, wie ich ihn bearbeitet hab in WP und bei verschiedenen Tests kam es ja bei gleichem Vorgehen auch vor, das mal nichts funktionierte.

  • Tja... Mit alert() solltest Du auf jeden Fall sehen können, was im Script passiert. Bei jQuery ist ja eine beliebte Fehlerursache auch, dass die Selektoren nicht stimmen, vielleicht liegt es daran.

    Wenn ich da weiter helfen soll, müssten wir mal schauen, wie ich mir das am lebenden Objekt anschauen kann. Entweder auf Deiner Seite oder Du speicherst mal eine Testseite als HTML ab und schickst mir das gezippt (Mail-Addy siehe mein Blog). So nur am Code rumzuprobieren macht das unnötig schwierig, wenn man es mit Firebug in wenigen Minuten klären könnte. :-)

  • Also ich hab es jetzt hinbekommen.
    Zuerst hab ich das Javascript im Footer statt im Header included und zwar ganz normal mit

    Code
    <script type="text/javascript"
       src="[URL zum Script]"></script>

    Jenes sieht jetzt so aus:

    Code
    jQuery('.mehrweniger').click(function () {
                                           
                                           
        if (jQuery(this).find('.mw').attr('title')=="weniger") {
                    jQuery(this).find('.mw').replaceWith('<span class="mw" title="mehr">mehr...</span>');
                   }
           else { jQuery(this).find('.mw').replaceWith('<span class="mw" title="weniger">weniger...</span>');
                   }
         });

    Und es funktioniert tatsächlich nur mit den zwei spans ineinander. Wenn ich die Funktion nur mit dem inneren span aufrufe, wo es sich quasi selbst ersetzt, dann geht er beim zweiten Klick (warum auch immer) gar nicht in die Funktion rein (habs mit alert() getestet, denn das funktionierte jetzt auch). Jedenfalls funktionert es jetzt, dass die Wörter ausgetauscht werden.

    Vielen Dank für deine Hilfe!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!