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

小提琴

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