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()从同一页加载数据，有没有比load更好的函数，我想从一个div中获取所有数据并将其放入#main div中。project 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');
        });
    });
});

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，因此需要更改标记。单击图像后，可以克隆相应的div，然后将克隆的元素插入到main div中：

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');
        });
    });
});