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将在加载新内容之前清空 div。但是，您可以尝试在之前克隆 div.load并根据需要使用克隆。

注意：$('#main').empty();then$('#main').load(link);是多余的，因为.load会清空 div。

尝试如下，

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

稍后您可以#main使用以下内容替换内容，

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