javascript - 用jquery替换和恢复div html

Question

我有几个函数，第一个替换 div 的内容，第二个恢复原始 div。问题是因为我使用的是replaceWith方法，如果我尝试第二次调用它，第二个div将不再存在。有一个更好的方法吗？我尝试创建一个变量来存储第二个 div 的内容，以便我可以重新使用它，但无法让它工作。

我的代码是:

$(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');

        });
    });
});

提前致谢!

Answer 1

您可以将两个内容放在同一个 div 中，并切换其父 div 的可见性。使用 javascript 只是切换包装器的类。

$('#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>