|
|||
addClass und removeClass
Hallo, ich probiere jetzt schon geraume Zeit herum, aber ich stehe auf dem Schlauch ... kann mir bitte jemand draufhelfen, warum das hier nicht geht?
Kompliziert KANN es nicht sein! Hier ist das Beispiel nachgebaut: test Bei Klick auf den roten Text, soll eine Ebene eingeblendet werden und der Text verändert. das geht auch soweit. Und es soll beim erneuten Klick der Text wieder zurück geändert werden und die Ebene wieder zugeklappt werden. Dazu habe ich beim aufklappbefehl die klasse "offen" per addClass hinzugefügt und die ursprüngliche "e-open" mit removeClass entfernt. das geht auch. Aber der zuklapp-Befehl mit dem selector auf die neue Klasse "offen", wird dann nur teilweise ausgeführt. Die Ebene wird zwar wiederzugeklappt, aber der Text ändert sich nicht zurück. hier der Code der Seite: 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>test</title> <style type="text/css"> div{border:1px solid green; width:50%; position:relative; padding:60px 20%; background-color:#FC9;} .english-text{width:50%; padding:30px 20%; display:none; position:relative;} .english-text-close{width:60px; height:20px; color:red; position:absolute; top:5px; right:5px; cursor:pointer;} .e-open, .offen{color:red; cursor:pointer; text-align: right;} </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> </head> <body> <div>aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br /> aaaa aaa aa aaaaaaaaaaaaaa aaa aaa aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br /> aaaa aaa aa aaaaaaaaaaaaaa aaa aaa aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br /> aaaa aaa aa aaaaaaaaaaaaaa aaa aaa aaaaaaaaaaaaaaaaa a a aaaaaaaaaaaaa aa a aa <br /> aaaa aaa aa aaaaaaaaaaaaaa aaa aaa</div> <div class="e-open"><h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3></div> <div class="english-text"> dögkldjfögkjöl dlgkjd jkldfg<br /> gjdflgk jdg <br /> ldfgj dfg <br /> dlfgjk dg <br /> dfg jdfg dlg <br /> dfg djfg <br /> dfg dfkjg dlkfg <br /> </div> <script language="javascript" type="text/javascript"> $(document).ready(function() { $(".e-open").click(function(){ $(".english-text").slideToggle("slow"); $(this).html('<h3>klapp wieder zu und ändere deinen text zurück x</h3>'); $(this).addClass('offen'); $(this).removeClass('e-open'); }); $(".offen").click(function(){ $(".english-text").slideToggle("slow"); $(this).html('<h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3>'); $(this).addClass('e-open'); $(this).removeClass('offen'); }); <!--abschlussklammer--> }); </script> </body> </html> Geändert von irmen (08.03.2018 um 23:28 Uhr) |
Sponsored Links |
|
||||
Mir fällt jetzt nur das ein
https://codepen.io/basti1012/pen/RMwYoP So kannst du auch einige klassen löschen |
Sponsored Links |
|
|||
Dieses Problem hat fast jeder einmal am Beginn mit Javascript. Ein evenlistener (.on() ) reagiert nur auf die Elemente, die bereits in der Seite vorhanden sind. Die Klasse "offen" gibt es beim erstellen der Seite noch nicht, die wird erst per JS hinzugefügt. Du musst also den eventlistener erst dann aufrufen, wenn die Klasse hinzugefügt wird.
|
|
|||
Vielen Dank!!!
mit .on() - meinst du das .click - oder? denn ein .on() kann ich in meinem code nicht finden. Deine Antwort ist mir eigentlich ganz logisch, aber leider habe ich sie trotzdem noch nicht verstanden. Ich füge doch zuerst die Klasse hinzu (mit addClass) und rufe sie dann nacher erst auf. Kann du mir vielleicht einen link nennen, in dem ich das nochmal genauer nachlesen kann, wie das geht? Das wäre super - ich tu mir mit der Termonologie noch sehr schwer und du würdest mir bei der Suche nach einem geeignten tutorial sehr helfen. Vielen Dank! Irmen |
|
|||
Ja, damit hat fast jeder Anfangs Probleme. Das ging auch mir einmal so. Hat man es einmal verstanden ist es "eh logisch", aber bis dahin ist es etwas verwirrend:
Code:
$(".e-open").click(function(){ //alles hier drinnen kennt js (noch) nicht }); $(".offen").click(function(){ //alles hier drinnen kennt js (noch) nicht }); Da musst du aber aufpassen, dass du die Events nur einmal (!) und nicht öfter zuweist. Du hast hier nun ein paar Möglichkeiten: Du kannst im "e-open" click den jeweiligen Status abspeichern und dann dementsprechend den Text ändern und ein- ausblenden und die Klasse nie ändern. Dafür würden sich zB data- Attribute eignen. Oder du arbeitest mit event delegation, indem du das click nur auf das übergeordnete Element zuweist und dann im eventhandler die Klasse des Ziels abfragst. Ansonsten kannst du auch beide HTML Teile immer im HTML haben und dann mittels einer zB hidden-Klasse das anzeigen lösen. Dann hast du aber den Effekt nicht dabei, bzw ist das dann nicht wirklich einfach (für einen Anfänger) zum einbauen. |
|
|||
Vielen Dank für deine Anregungen!
Das muss ich ersteinmal verdauen ... ... außerdem ist jetzt als freundliche Komplikation hinzugekommen, dass ich das ganze in WP verwende und meine vielen Galerien (nextgen) es nicht vertragen, wenn ich ein aktuelle jquery library aufrufe. Schöne Grüße Irmen Geändert von irmen (09.03.2018 um 12:54 Uhr) |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jQuery: removeClass Problem! | meGa | Javascript & Ajax | 3 | 23.01.2011 15:43 |
Problem mit addClass/ removeClass bei Jquery | connor | Javascript & Ajax | 1 | 25.12.2009 14:25 |