Question

尝试将内容加载到div中，然后单击再次加载div中的先前内容。

这是我到目前为止的代码：

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

  $('.back').click(function(e){
  event.preventDefault();
  $('#main').load('mainClone *');
  });
});

我做错了什么？这让我疯了！

另一方面，这是解决我问题的好方法吗？我正在努力实现类似于工作部分的内容：http://www.revolver-studio.com/ 您单击一个拇指，它会进入更多信息，然后您单击返回再次转到拇指。任何帮助将非常感激。谢谢你们！

Answer 1

几个问题。

首先是在项目点击处理程序中第二次使用var mainClone。这是声明一个名为mainClone的新变量，与您声明的原始变量不同。新的只在声明的函数中具有范围，因此原始的更全局的将永远不会改变。

当你想用存储的html重新创建html时，我们使用load()的下一个问题。它既不适合您想要做的事情，也只是一个无效的字符串。

$(document).ready(function(){
   var mainClone = null;
   $('.project').click(function(e){
      var link = $(this).attr('rel');
      event.preventDefault();
      /*var mainClone = $('#main').clone();*/ 
      mainClone = $('#main').html();// now will update var declared above and only get the html within the element
      $('#main').load(link);
   });      

  $('.back').click(function(e){
  event.preventDefault();
  if( mainClone ){ // make sure it's not null still
    $('#main').html( mainClone);
  }
  });
});

总的来说，这段代码仍然有点弱，但SO并不打算为你构建应用程序。它应该让你开始

Answer 2

最好保存div并隐藏它们。在这个例子中，它们被“缓存”并且不需要额外的负载（未经测试）

$(document).ready(function(){
    $('.project[rel]').click(function(){
        var href = $(this).attr('rel');
        var $target = $('#main .pane[rel=' + href + ']');
        if ($target.length == 0) {
            $target = $('<div class="pane" rel="' + href + '">Loading...</div>').appendTo('#main').hide().load(href);
        }
        $('#main .pane').hide();
        $target.show()
        return false;
    });
});

您可能希望使用$.ajax()方法而不是$.fn.load()，因为它可以让您正常处理HTTP /连接错误。

以这种方式使用rel=""属性通常也不是一个好主意，因为它具有特定用途，带有预期值列表http://www.w3schools.com/html5/att_a_rel.asp

对于HTML5，我建议使用新的数据属性，例如data-href=""。 John Resig在这篇http://ejohn.org/blog/html-5-data-attributes/

上有一篇很好的文章

Answer 3

$('#main').load('mainClone *');

这是不正确的语法和功能用法。您没有调用任何外部文件，因此您需要使用任何DOM操纵器，例如html()或appendTo，而不是load()

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

Jsfiddle：http://jsfiddle.net/92h75/1/

如何将克隆的内容加载为var

3 个答案: