如何获取对每个图像的 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

应该是 text 而不是 alt_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