Question

我使用Packery将缩略图库组织成砖石样式列。

我正在尝试制作它，以便点击图像时所有图像都淡出，div显示相同图像的较大版本，并显示相关信息。

到目前为止，我已经做到了这一点，当点击这个库中的任何图像时，所有这些图像都被JQuery隐藏，然后设置为display:none的div变得可见。

如何获取所单击图像的id或class，然后将其回显到另一个语句中，以便我可以看到相应的内容？

我知道我可以通过一系列单独的JQuery语句来实现这一点但是我确信有一种方法可以像我这样做，我不知道。

到目前为止我的JQuery。

$( "#galeria .item" ).click(function() {
        $( "#galeria" ).fadeOut( 1000, function() {
            $( "#nuevoContenido" ).fadeIn( 1000 );
        });
    });
    $( "#nuevoContenido .lrg-item" ).click(function() {
        $( "#nuevoContenido" ).fadeOut( 1000, function() {
            $( "#galeria" ).fadeIn( 1000 );
        });
    });

Html

<div id="galeria" class="container col-md-10 col-md-offset-1 text-center">
            <a hre="#"><img class="item" src="img/editorial/revistamexico1.jpg"></a>
            .....
            <a hre="#"><img class="item" src="img/hechoamano/silla_todo.jpg"></a>

        </div>
        <div id="nuevoContenido" class="container">
            <div class="col-md-6">
                <a hre="#"><img class="img-responsive lrg-item" src="img/hechoamano/silla_todo.jpg"></a>
            </div>
            <div class="col-md-6 text-left">
                <h1>This</h1>
                <p>This this</p>
                <a href="#" class="btn btn-lg btn-success lrg-item">Regresa a Galeria</a>
            </div>
        </div>

Answer 1

因为所有带有“.item”类的元素都是图像，或许您可以更改#nuevoContenido div的innerHTML以显示该图像的副本？但是，在客户端和服务器上这可能有点困难。

编辑：我没有注意到你已经在#nuevoContendio中拥有的元素。我已经更新了下面的代码以反映另一种可能性，它也使用HTML5 data- *属性：

<!-- data attributes are added to each img element, containing the image's title and description -->
<div id="galeria" class="container col-md-10 col-md-offset-1 text-center">
    <a hre="#"><img class="item" src="img/editorial/revistamexico1.jpg" data-title="Here is the title of this image" data-description="Here is a description of this image"></a>
        .....
    <a hre="#"><img class="item" src="img/hechoamano/silla_todo.jpg" data-title="Another title!!" data-description="another description"></a>

</div>


//the image's src, data-title, and data-description will be passed to the function
$( "#galeria .item" ).click(function() {
    var src = $(this).attr('src'),
        title = $(this).attr('data-title'),
        desc = $(this).attr('data-description');

    $( "#galeria" ).fadeOut( 1000, function() {
        $( "#nuevoContenido" ).fadeIn( 1000 )
        .children('img-responsive lrg-item').attr('src',src);

        $( "#nuevoContenido h1" ).html(title);
        $( "#nuevoContenido p" ).html(desc);
    });
});

这将改变当前在#nuevoContenido中的图像的src属性，然后分别更新H1和P以保存图像的标题和描述。

单击时获取元素id或类，并在JQuery语句中使用

1 个答案: