jQuery从另一个div加载内容

Question

因此，我有几个隐藏的div，当用户点击图像时，它会加载该div的内容。我有一个工作方法，但相信这不是正确的方法。

的HTML

<div class="slide"> 
    <img src="images/image1.jpg" alt="" id="project-1" /> 
    <img src="images/image2.jpg" alt="" id="project-2" /> 
    <img src="images/image3.jpg" alt="" id="project-3" /> 
</div> 
<div id="project-1" class="hidden"> 
    <p>Project </p> 
</div> 
<div id="project-2" class="hidden"> 
    <p>Project 2</p> 
</div> 
<div id="project-3" class="hidden"> 
    <p>Project 3</p> 
</div> 
<div id="main"> 

</div> 

当前的jQuery：

$(document).ready(function() 
{ 
    $('.slide img').click(function() 
    { 
     var project = $(this).attr('id'); 
     $('#main').fadeOut('slow', function() { 
      $("#main").load(window.location.pathname+" #"+project+" > *").fadeIn('slow'); 
     }); 
    }); 
}); 

正如你可以看到它使用load（）来在同一页面加载数据，有没有更好的功能比负载使用这个，我想从一个div获取所有数据并将其放入#main div。项目var存储我想要从中获取数据的div的名称。

Answer 1

不能使用相同的ID两次，ID是唯一的，所以你需要改变一些东西：

<div class="slide"> 
    <img src="images/image1.jpg" alt="" data-id="project-1" /> 
    <img src="images/image2.jpg" alt="" data-id="project-2" /> 
    <img src="images/image3.jpg" alt="" data-id="project-3" /> 
</div> 
<div id="project-1" class="hidden"> 
    <p>Project </p> 
</div> 
<div id="project-2" class="hidden"> 
    <p>Project 2</p> 
</div> 
<div id="project-3" class="hidden"> 
    <p>Project 3</p> 
</div> 
<div id="main"> 

</div> 

然后，你可以这样做：

$(document).ready(function() { 
    $('.slide img').on('click', function() { 
     var project = $('#' + $(this).data('id')).html(); 
     $('#main').fadeOut('slow', function() { 
      $(this).html(project).fadeIn('slow'); 
     }); 
    }); 
}); 

FIDDLE

Answer 2

你可以使用jQuery的html（）函数：

http://api.jquery.com/html/

即

$(document).ready(function() 
{ 
    $('.slide img').click(function() 
    { 
     var project = $(this).attr('id'); 
     $("#main").html($("#" + project).html()); 
    }); 
}); 

编辑：你不需要通过ID为目标，因此该位：

 var project = $(this).attr('id'); 
     $("#main").html($("#" + project).html()); 

可以简化为：

 $("#main").html($(this).html()); 

Answer 3

你不能有多个具有相同ID的元素，因此您需要更改标记。点击图片后，您可以克隆相应的格，然后插入克隆元素融入main格：

HTML

<div class="slide"> 
    <img src="images/image1.jpg" alt="" data-div-id="project-1" /> 
    <img src="images/image2.jpg" alt="" data-div-id="project-2" /> 
    <img src="images/image3.jpg" alt="" data-div-id="project-3" /> 
</div> 

jQuery的

$(document).ready(function() { 
    $('.slide img').click(function() { 
     var project = $('#' + $(this).data('div-id')).clone(); 
     $('#main').fadeOut('slow', function() { 
      $("#main").empty().append(project).fadeIn('slow'); 
     }); 
    }); 
});