如何获取对每个图像的alt标记的引用，并将其显示为lightbox库中相应图像下面的标题

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