jQuery: Prüfen, ob ein DIV-Element existiert

[Senfgeist]

Hi,

ich habe folgenden Ausschnitt eines Codes:

		if(is_category() || is_tag() || is_tax('portfolio-category') || is_tax('portfolio-tag')){
			$tag_description = term_description('', false) . ('<a class="mehrinfos" href="#">Mehr Infos anzeigen →</a>');
		}

Es handelt sich hierbei um einen Teil meines Blogthemes, welches ich aufbaue. Explizit geht es in dem Codeschnippsel um diesen Bereich speziell:

('<a class="mehrinfos" href="#">Mehr Infos anzeigen →</a>')

Hier möchte ich gerne die jQuery Abfrage nach einem vorhandenem DIV-Element einbauen namens "tagmehrinfos". Ich habe also Folgendes probiert:

(if($('#tagmehrinfos').length > 0) {'<a class="mehrinfos" href="#">Mehr Infos anzeigen →</a>')}

Aber das führt immer nur zu fehlerhaften Code und beim Aufruf der Seite zu Serverfehler 500. Wenn ich es wieder rückgängig mache, wird alles korrekt angezeigt.

Hat jemand einen Tipp, was bei dem Code fehlt oder falsch ist?

Liebe Grüße!

 

[Yuuri]

Ein if in einer Klammer funktioniert nicht.

 

[Senfgeist]

Ah, dann kommen wir dem Problem auf die Spur... wie kann man es dann lösen?

 

[Yuuri]

Keine Ahnung, ich seh den Zusammenhang nicht, weiß nicht was term_description macht und hab keine Ahnung, was du eigentlich mit ('<a class="mehrinfos" href="#">Mehr Infos anzeigen →</a>') bezwecken willst.

Als Hinweis: Lager die if aus oder verwende die Kurzschreibweise (xy ? true-Zweig : false-Zweig).

 

[Senfgeist]

Ok, habe das Problem gelöst.

Eine andere ähnliche Frage. Ich möchte, dass der Aufklapp-Text "Mehr Infos anzeigen" sich in "Infos ausblenden" verwandelt, sobald man den Toggle nutzt und Inhalt anzeigt. Das ist aktuell das Script:

<script type="text/javascript">
     $(document).ready(function(){
     $("#tagmehrinfos").hide();
 
     $("a.mehrinfos").click(function () {
     $("#tagmehrinfos").slideToggle("slow");
     });
     });
</script>

Wie muss ich diesen umschreiben, damit bei geschlossenem Zustand "Mehr Infos anzeigen" (a.mehrinfos) gezeigt wird und beim geöffneten Zustand dann "Infos ausblenden"?

 

[Yuuri]

$(this).text( $('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos' )

In den Click-Handler vom Link. Pack aber ein return false; hinten dran, sonst leitet der Link evtl. um, falls etwas im href-Attribut steht.

 

[Senfgeist]

Hi, danke Dir! Das hat geklappt. Ich bin allerdings kein großer Programmierer, ich bin Designer und froh, dass ich mit manchen Code "umgehen" kann. Ich verstehe nicht, was Du mit dem "Pack ein return false;" an meinst. Wo soll das genau hin?

Im aktuellen Fall steht da wirklich "Mehr Infos anzeigen" und wenn ich drauf klicke, erscheint "Infos ausblenden". Aber auch beim Ausblenden steht weiterhin dort "Infos ausblenden", es geht also nicht mehr zur Ausgangssituation zurück.

 

[Yuuri]

<a class="mehrinfos" href="xy.php">Mehr Infos anzeigen →</a>
<div id="tagmehrinfos">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit nulla, malesuada tempus cursus tincidunt, viverra non orci. Nunc fringilla porttitor sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin et metus non dolor fringilla rutrum. Suspendisse potenti. Donec id odio eget enim bibendum consectetur. Cras vel purus lectus? Curabitur libero ipsum, aliquet sed varius vel, gravida nec erat. Integer et accumsan sem. Sed consequat dolor sit amet augue pretium lacinia. Ut at eros eu ligula malesuada euismod ut condimentum massa. Proin euismod vehicula diam, in sagittis dui rutrum non.
</div>
<script type="text/javascript">
$('#tagmehrinfos').hide();
$('a.mehrinfos').click( function()
{
	$(this).text( !$('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos anzeigen →' );
	$('#tagmehrinfos').slideToggle( 'slow' );
	return false;
} );
</script>

funktioniert so wie ich denke.

Das return false; sollte dort hin, falls du dem a-Tag einen Link verpasst. Falls vorhanden, wird nämlich das Script ausgeführt und zum Link gesprungen. Mit dem return false; unterbindest du, dass dem Link gefolgt wird, allerdings das Script ausgeführt wird.

 

[Senfgeist]

Hi,

der JS-Code funktioniert leider nicht so. Jetzt wird der Inhalt beim Aufruf der Seite direkt angezeigt. Darunter befindet sich "Mehr Infos anzeigen →", was bei einem Klick auch nichts ausführt.

Vor dem Einbetten dieses Codes jetzt war der versteckte Text beim Laden der Seite versteckt. Dann klickte ich auf "Mehr Infos anzeigen →" und es wurde der Rest dargestellt. Irgendwas scheint da im Code gerade zu fehlen, oder?

Also der hier klappt, nur dass eben der Linktext "Mehr Infos anzeigen →" sich nur 1x in "Infos ausblenden" ändert und dann auch beim Zuklappen noch "Infos ausblenden" bleibt:

<script type="text/javascript">
     $(document).ready(function(){
     $("#tagmehrinfos").hide();
 
     $("a.mehrinfos").click(function () {
     $("#tagmehrinfos").slideToggle("slow");
	 $(this).text( $('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos anzeigen →' )
	 });
     });
</script>

Dein aktueller Code lässt den versteckten Inhalt gleich anzeigen und ein Klick auf "Mehr Infos anzeigen →" bewirkt gar nichts (zumal der Inhalt ja bereits gezeigt wird).

 

[Yuuri]

Ja, das liegt daran, dass ...is( ':visible')... gleich direkt nach dem Ein-/Ausblenden passiert, die Animation aber Zeit benötigt. Pack es entweder davor, wie bei mir oben mit Anpassungen oder du musst das ins Callback der Animation schmeißen.

 

[Senfgeist]

o.O

Ergänzung (27. Februar 2013)

Ich vermute, ich sehe den Wald vor lauter Bäumen nicht - oder so :-) Irgendwie funktioniert das Ganze nicht, wie es soll. Nachdem ich jetzt das "is( ':visible') verschoben habe, war erst der Original-Linktext zu sehen, dann beim Klicken der neue Linktext und wenn ich nochmal klicke steht die ganze Zeit "Infos ausblenden" usw. dort. Ich bin schlussendlich nun in völliger Vewirrung :-) Ich weiß leider auch nicht, was eine "Callback der Animation" ist :-)

Ergänzung (27. Februar 2013)

Ich versuche es noch einmal der Übersicht halber zu beschreiben, was ich hier habe. Ich würde mich freuen, wenn Du mir einfach schreibst, was ich ersetzen soll, sozusagen 1:1 einfach per Copy & Paste. Würde mich echt freuen!

Also... erst einmal habe ich einen Bereich der Seite, der so wie hier aussieht:

<div id="tagmehrinfos">
TEXTINHALT
</div>

Nun habe ich innerhalb des Templates an der Stelle, wo der "Mehr Infos anzeigen"-Link angezeigt werden soll, Folgendes stehen:

<a class="mehrinfos" href="#">Mehr Infos anzeigen →</a>

Im Header der Seite habe ich das hier stehen:

<script type="text/javascript">
     $(document).ready(function(){
     $("#tagmehrinfos").hide();
 
     $("a.mehrinfos").click(function () {
     $("#tagmehrinfos").slideToggle("slow");
	 $(this).text( $('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos anzeigen →' )
	 });
     });
</script>

Das ist Alles. Im Moment (so wie es hier steht), passiert Folgendes: Ich öffne die Seite, es wird "Mehr Infos anzeigen →" angezeigt und der Inhalt ist versteckt. Soweit alles ok. Ich klicke auf den Link, der Inhalt erscheint (slidet nach unten) und der Linktext ändert sich zu "Infos ausblenden". Klicke ich auf "Infos ausblenden" verschwindet der Inhalt, aber der Link bleibt "Infos ausblenden".

So, der Übersicht zuliebe :-) Wie gesagt, mir sind so Begriffe wie Callback und Co. fremd, ich bin froh, dass ich es geschafft habe, die Seite gut aufzubauen, hänge aber an diesem JavaScript Zeugsel fest.

Würde mich freuen, wenn Du mir sagst, wo ich nun was genau austauschen soll.

 

[Yuuri]

Setz diese Zeile

$(this).text( !$('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos anzeigen →' );

einfach vor Zeile 6 in deinem letzten Schnipsel. Zeile 7 (die alte Version) kann nun raus.

So wird beim Klick erst der Text gewechselt und dann startet die Animation, wodurch sich das Problem erübrigt.

 

[Senfgeist]

Hi,

nein, das ändert leider nichts :-/

<script type="text/javascript">
     $(document).ready(function(){
     $("#tagmehrinfos").hide();
 
     $("a.mehrinfos").click(function () {
	 $(this).text( $('#tagmehrinfos').is( ':visible' ) ? 'Infos ausblenden' : 'Mehr Infos anzeigen →' );
     $("#tagmehrinfos").slideToggle("slow");
	 });
     });
</script>

So, wie Du mir jetzt beschrieben hast, richtig? Wenn ich nun die Seite lade, sehe ich "Mehr Infos anzeigen", wenn ich drauf klicke, wird der Inhalt gezeigt, der Text bleibt aber nach wie vor "Mehr Infos anzeigen", wenn ich jetzt wieder auf "Mehr Infos anzeigen" klicke, wird der Inhalt wieder versteckt und der Text ändert sich in "Infos ausblenden". Wenn ich nun wieder auf "Infos ausblenden" klicke, wird der Inhalt wieder angezeigt und der Text ändert sich in "Mehr Infos anzeigen" (was in dem Fall ja keinen Sinn macht, weil der Inhalt gezeigt wird).

 

[Yuuri]

Kopier den Code von oben mal, inklusive dem Ausrufezeichen vor dem Dollar.

 

[Senfgeist]

*freu* Was so ein kleines "!" doch bewirken kann. Jetzt klappt es! Was genau sagt das "!" eigentlich aus? Danke Dir für Deine Hilfe :-)

 

[Yuuri]

Das negiert den Wert. Aus true wird false und umgekehrt.

 

[Senfgeist]

Kurze Nachfrage: Gibt es eine Möglichkeit NACH Zuklappen des versteckten DIV-Bereiches den unteren Bereich der Webseite wieder nach oben mitziehen zu lassen? Aktuell rutscht z.b. der Bereich nach unten, die Seitenleiste entsprechend mit, sobald ich den Bereich zuklappe rutschen zwar alle Elemente mit nach oben, aber unterhalb der Seitenleiste bleibt eine lange weiße Fläche. Kann man das "Zuviel" irgendwie mitverschwinden lassen beim Zuklappen?