0

尝试将内容加载到 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/ 您单击一个拇指，它会进入更多信息，然后您单击返回再次转到拇指。任何帮助将非常感激。多谢你们！

4

3 回答 3

1

几个问题。

首先是var mainClone项目内点击处理程序的第二次使用。这是声明一个名为的新变量mainClone，并且与您声明的原始变量不同。新的只在它声明的函数内有作用域，所以原来的更全局的永远不会改变。

load()当您想用存储的 html 替换 html 时，我们使用的下一个问题。它既不适合您想要做的事情，而且参数只是一个无效的字符串。

$(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 并不打算为您构建应用程序。它应该让你开始

于 2012-06-17T02:27:15.137 回答
1

保存 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/的优秀文章

于 2012-06-17T02:54:29.950 回答
0 
$('#main').load('mainClone *');

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

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

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

于 2012-06-17T02:28:30.087 回答