用jquery替換和恢復div html

我有幾個函數，第一個替換div的內容，第二個恢復原始div。問題是因爲我正在使用replaceWith方法，如果我第二次嘗試調用它，則第二個div不再存在。有一個更好的方法嗎？我已經嘗試創建一個變量來存儲第二個div的內容，以便我可以重用它，但無法使其工作。用jquery替換和恢復div html

，我所擁有的代碼是：提前

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

     }); 
    }); 
});

謝謝！

來源

2017-01-24 RScott

您可以創建一個代碼片段？ –

嘗試添加'mainClone.fadeIn（）'到第二個函數。 –

從文檔

的.fadeOut（）方法動畫匹配元素的不透明度。一旦透明度達到0，顯示樣式屬性設置爲無，所以該元素不再影響頁面

您可能需要手動設置顯示器樣式屬性恢復到原來的值，或致電佈局jQuery的.fadeIn()函數將做與.fadeOut()相反的操作.fadeOut()

來源

2017-01-24 14:11:05

你可以將兩個內容放在同一個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>

來源

2017-01-24 14:13:00 kapantzak

用jquery替換和恢復div html

回答

相關問題