Ersetzen und Wiederherstellen von div html mit jquery

Question

Ich habe ein paar Funktionen, die erste ersetzt den Inhalt eines div die zweite stellt die ursprüngliche Div. Das Problem liegt daran, dass ich die Methode replaceWith verwende. Das zweite div existiert nicht mehr, wenn ich versuche, es ein zweites Mal aufzurufen. Gibt es einen besseren Weg, dies zu tun? Ich habe experimentiert, eine Variable zu verursachen, die den Inhalt des zweiten div speichert, also kann ich es resuse, aber konnte es nicht zum Funktionieren bringen.

Der Code, den ich habe, ist:

$(document).ready(function() { 

$('#trigger_adults').click(function() { 
    var mainClone = $("#main-content").clone(); 

    $('#main-content').fadeOut('fast', function() { 
     $('#main-content').replaceWith($('#adults')); 
     $('#slider-sec').slideUp('slow'); 
     $('#adults').fadeIn('fast'); 
     $(window).scrollTop(0); 

    }); 

    $('#return').click(function() { 

     $("#adults").replaceWith(mainClone.clone()); 
     $('#adults').fadeOut('fast'); 
     $('#slider-sec').slideDown('slow'); 

     }); 
    }); 
}); 

Vielen Dank im Voraus!

Answer 1

der Dokumenten

Die .fadeOut() Methode belebt die Opazität der abgeglichenen Elemente. Sobald die Opazität 0 erreicht, wird die Anzeigestil-Eigenschaft auf keine festgelegt, so dass das Element keinen Einfluss mehr auf das Layout der Seite

müssen Sie entweder den Anzeigestil Eigenschaft wieder auf den ursprünglichen Wert manuell eingestellt oder Anruf jQuerys .fadeIn() Funktion, die das Gegenteil von .fadeOut()

Answer 2

tun können Sie beide Inhalte in der gleichen div und schalten Sie die Sichtbarkeit ihrer Eltern divs. Verwenden Sie Javascript, um die Klasse des Wrappers umzuschalten.

$('#toggle').click(function() { 
 
    $('#wrapper').toggleClass('init-state new-state'); 
 
});

#wrapper { 
 
    border:1px solid #d8d8d8; 
 
} 
 
.init-state #new, 
 
.new-state #init { display:none; } 
 
.inner { 
 
    padding:25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="wrapper" class="init-state"> 
 
    <div id="init" class="inner">Initial Content</div> 
 
    <div id="new" class="inner">New Content</div> 
 
    <button id="toggle" type="button">Toggle</button> 
 
</div>