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

注意：$('#main').empty();然后$('#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>

当您想要返回时，可以使用原始HTML替换div，如下所示：

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

加载外部html后回来

3 个答案: