[TYPO3-german] OT jQuery: Nach .hide() zeigt .show() keinen Inhalt mehr an

[bernd wilke]

Am 26.06.15 um 08:26 schrieb Johannes C. Laxander:
> Hallo,
>
>
>
> der Betreff beschreibt das Problem schon ziemlich genau. Gibt es dafür
> irgend einen Grund?
>
>
>
> Vereinfachte HTML Struktur:
>
>
>
> <div class="slider panel1">
>
>      <img ...>
>
>      <img ...>
>
>      <img ...>
>
> </div>
>
> <div class="slider panel2">
>
>      <img ...>
>
>      <img ...>
>
>      <img ...>
>
> </div>
>
>
>
> CSS Code:
>
>
>
> slider { display: block;}
>
>
>
> JavaScript Code:
>
>
>
> $("div[class*='slider']").hide();
>
> $("div[class*='slider']:first").show();
>
>
>
> /* Sichtbarkeit wechseln */
>
> $("div[class*='slider']").hide();
>
> $("div[class*='panel2']").show();
>
>
>
> Wenn ich nun mit JS über die Console im Chrome die Sichtbarkeit der beiden
> Panels wechseln möchte wird zwar 'panel1' nicht mehr angezeigt, 'panel2'
> aber auch nicht (hat allerdings eine unbekannte Höhe).
>
>
>
> Eigenartig ist, dass, wenn ich ALLE vier Befehle über die Console im Chrome
> ausführe, das Problem nicht auftritt.
>
>
>
> Gibt es dafür irgend eine Erklärung, oder noch besser eine Lösung!??

vielleicht gibt es eine racing condition? (das hide() hat noch nicht 
alle  Elemente versteckt, während das Show das eine schon sichtbar 
gemacht hat, und sofort danach wird es vom noch laufenden hide wieder 
versteckt.

was mir auffällt ist die recht komplexe selektion. warum nicht einfach:

$('.slider').hide();
$('.slider:first').show();

/* Sichtbarkeit wechseln */
$('.slider').hide();
$('.panel2').show();

was jetzt aber nicht unbedingt so viel ändern sollte.

als Ausweg:

nicht alle verstecken, sondern nur das aktuell sichtbare. dafür dann 
eine Klasse dynamisch vergeben:


$('.slider:first').show().addClass('active');

$('.slider.active').hide().removeClass('active');
$('.panel2').show().addClass('active');



bernd
-- 
http://www.pi-phi.de/cheatsheet.html