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的元素，因此您需要更改标记。单击图像后，您可以克隆相应的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');
        });
    });
});

jQuery从另一个div加载内容

3 个答案: