自定义字幕显示，jQuery，JavaScript

Question

I was playing around with an image gallery function I constructed, attempting to produce a caption below the full image using the thumbnails' image attributes. alt and title specifically. The thumbnail-gallery side has no issues. The caption on the other hand is returning undefined , and is appearing below the first thumbnail, instead of below the full image.

$('.gallery li img').hover(function(){
        var $viewer = $(this).parents('.viewer');
      $('.full-img',$viewer).attr('src',$(this).attr('src').replace('thumb/', ''));
      $('.full-img',$viewer).attr('alt',$(this).attr('alt').replace('thumb/', ''));
         var caption_alt = $('.full-img',$viewer).attr('alt');
         var caption_title = $('.full-img',$viewer).attr('title');
      if (caption_alt !== "" && caption_title !== ""){('.full-img', $viewer).after('<p class="captiontitle">' + caption_title + '</p>' + '<p class="captionalt">' + caption_alt + '</p>')}
});

Answer 1

try this

$('.gallery li img').hover(function(){
        var $viewer = $(this).parents('.viewer');
        $('.full-img',$viewer).attr('src',$(this).attr('src').replace('thumb/', ''));
        $('.full-img',$viewer).attr('alt',$(this).attr('alt').replace('thumb/', ''));//missed . here
         var caption_alt = $('.full-img',$viewer).attr('alt');//missed . here
         var caption_title = $('.full-img',$viewer).attr('title');//missed . here
      if (caption_alt !== "" && caption_title !== ""){('.full-img', $viewer).after('<p class="captiontitle">' + caption_title + '</p>' + '<p class="captionalt">' + caption_alt + '</p>')}
}); //missed a . and an ending double quote "