jquery - 如何获取对每个图像的 alt 标签的引用并将其显示为灯箱库中相应图像下方的标题

Question

我试图在 jQuery 灯箱中获取对图库图像的 alt 标记的引用，并在它跳转到更大图像的链接并将其放入灯箱后，将其显示为图像下方的标题。

$(function(){

    $('.gallery a').on('click', function(e){
        var image_source = $(this).attr('href');
        var text = $('.gallery a img').attr('alt'); 

        $('#content').html('<img src="' + image_source + text + '">');
        /* .html('<p style="color:#fff;">' + alt_text + '</p>');
-----------above was the other method I tried which didn't work so I commented it out--  -----*/

        $('#lightbox').show();

        e.preventDefault();
    });//End Gallery


    $('#lightbox').on('click', function(){
        $(this).hide();
        $('#content img').remove();
    });
});//End Ready

当然，我希望在单击图库缩略图时为相应的较大图像显示相应图像的 alt 标签。

任何建议将不胜感激，在此先感谢！这是它的 JSFiddle：http: //jsfiddle.net/graphicsinc/37A4y/13/

Answer 1

而不是alt_text应该是text 或将变量名称重命名text为alt_text.

编辑：代码应该是这样的：

$(function() {

    $('.gallery a').on('click', function(e) {
        e.preventDefault();
        var image_source = $(this).attr('href');
        var alt_text = $('.gallery a img').attr('alt');

        $('#content')
            //.html('<img src="' + image_source + text + '">');
            .html('<p style="color:#fff;">' + alt_text + '</p>');
        $('#lightbox').show();
    });//End Gallery

    $('#lightbox').on('click', function() {
        $(this).hide();
        $('#content img').remove();
    });

});//End Ready

jsFiddle

EDIT2：如果你想添加alt属性img，它应该看起来像这样

$('#content').html('<img src="' + image_source + '" alt="' + alt_text + '">');

jsFiddle