zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden addClass und removeClass

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.03.2018, 00:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard 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>
Vielen Dank für eure Hilfe!!

Geändert von irmen (09.03.2018 um 00:28 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.03.2018, 08:49
Benutzerbild von basti1012
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 184
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Mir fällt jetzt nur das ein
https://codepen.io/basti1012/pen/RMwYoP
So kannst du auch einige klassen löschen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.03.2018, 09:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.03.2018, 09:54
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 09.03.2018, 13:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
});
das .on("click") oder einfach nur .click() wird auf alle Elemente gebunden, die "jetzt gerade" existieren. Wenn du "offen".click() aufrufst, dann exisitert das alles noch nicht. Du musst also den eventhandler erst dann zuweisen wenn die Elemente existieren.
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.
Mit Zitat antworten
  #6 (permalink)  
Alt 09.03.2018, 13:51
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

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 13:54 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 09.03.2018, 21:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Wordpress hat doch bereits jquery dabei, wieso brauchst du da unbedingt eine andere Version?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery: removeClass Problem! meGa Javascript & Ajax 3 23.01.2011 16:43
Problem mit addClass/ removeClass bei Jquery connor Javascript & Ajax 1 25.12.2009 15:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:36 Uhr.