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 更好的功能，我想从一个 div 中获取所有数据并将其放入#main div。项目 var 存储我要从中获取数据的 div 的名称。

4

3 回答 3

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

小提琴

于 2013-05-30T23:10:44.213 回答
1

您可以使用 jQuery 的 html() 函数：

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

IE

$(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 回答
0

您不能拥有多个具有相同 ID 的元素，因此您需要更改标记。单击图像后，您可以克隆相应的 div，然后将克隆的元素插入到maindiv 中：

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');
        });
    });
});
于 2013-05-30T23:15:44.430 回答