jquery - 单击时获取元素 ID 或类并在 JQuery 语句中使用

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 中已有的元素。我更新了下面的代码以反射(reflect)另一种可能性，它也使用 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 以保存图像的标题和描述。