0

したがって、非表示の 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 よりも優れた機能はありますか? 1 つの div からすべてのデータを取得し、#main div に入れたいと考えています。プロジェクト var には、データを取得する div の名前が格納されます。

4

3 に答える 3

1

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());
于 2013-05-30T23:11:07.593 に答える