jquery - 外部htmlを読み込んだ後に戻る

Question

これについて頭を悩ませています（jQueryなどは初めてです）。

クリックすると外部の html ファイルを自分のページに読み込むことができましたが、その div に以前あったものに戻る方法がわかりません。

私のコード:

$(document).ready(function(){
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      $('#main').empty();
      $('#main').load(link);
   });
});

どんな助けでも本当に感謝しています。

ありがとう！

Answer 1

div のクローンを作成して変数に保存できます。

 var whatWas = $('#main').clone();

Answer 2

.load will empty the div before loading the new content. However you can try to clone the div before .load and use the clone as you want.

Note: $('#main').empty(); and then $('#main').load(link); is redundant as .load will empty the div.

Try like below,

$(document).ready(function(){
   var $mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      $mainClone = $('#main').clone().prop('id', 'main-clone'); //clone and change ID
      $('#main').load(link);
   });      
});

later you can replace the #main content using below,

$('#main').html($mainClone.html())

Answer 3

新しい HTML をロードする前に、div にあったものを保存する必要があります。ほとんどの場合、これをグローバル変数に格納する必要があります。

<script type="text/javascript">
    var whatWas;

    $(document).ready(function(){
       $('.project').click(function(e){
          global whatWas;
          var link = $(this).attr('rel');
          whatWas = $('#main').clone();
          event.preventDefault();
          $('#main').empty();
          $('#main').load(link);
       });
    });

    ...
    //here you need to catch the event that you want to use to load the original content back into the div
</script>

元に戻したい場合は、次のように div を元の HTML に置き換えることができます。

$('#main').html(whatWas);