javascript - 我无法让我的标题显示在我的灯箱中

Question

我有一个灯箱，我可以让它从一张图片滚动到另一张图片，但自从添加了前进和后退按钮后，我失去了曾经在那里的标题。如果有人能帮我弄清楚，我将不胜感激。

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

//An image to overlay
$overlay.append($image);

var $leftArrow = $("<div id='leftArrow'></div>");
var $rightArrow = $("<div id='rightArrow'></div>");
var $closeLightbox = $("<div id='closeLightbox'></div><div style='clear:both'></div>");

$image.before($closeLightbox);
$image.before($leftArrow);
$image.after($rightArrow);

//A caption to overlay
$overlay.append($caption);

//Add overlay
$("body").append($overlay);

//Capture the click event on a link to an image
$("#boxCabinet a,#channelLetters a, #customSignage a, #postandpanel a").click(function(event){
event.preventDefault();

getCurrentImage(this);

//Show the overlay.
$overlay.show();
});

$leftArrow.click(function(){
getPrevImage();
 });

$rightArrow.click(function(){
getNextImage();
});

function getCurrentImage (currentImage) {  
thisImage = currentImage;
var imageLocation = $(currentImage).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);

//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
 }

function getPrevImage() {
imageParent = $(thisImage).parent().prev();
if(imageParent.length!=0){
  thisImage = $(imageParent).children("a");

 }
getCurrentImage(thisImage);

 }

function getNextImage() {
imageParent = $(thisImage).parent().next();
if(imageParent.length!=0){
thisImage = $(imageParent).children("a");

}
getCurrentImage(thisImage);
 }

//When overlay is clicked
$closeLightbox.click(function(){
//Hide the overlay
$overlay.hide();
});

这是我的 html

  <div id="slideshow">

  <a name="featured" id="featured"></a>

  <h1>Featured Work</h1>
  <div id="ssouter">
  <% csv.each do |row|%>
    <% if row[2] == "Active" && row[4] == "Featured" %>   
    <img class="slideshow" src=<%= row[0]%> >

    <% end %>

   </div>

   </div>

    <div id="portfolio">
 <a name="boxCabinet"></a>
 <h1>Box Cabinet </h1>

    <ul id="boxCabinet">

    <% csv.each do |row|%>
    <%   if row[3] == "Box" && row[2] == "Active" %>
    <li><a href="<%= row[0]%>"><img src=<%= row[0]%> width="120" height="120"alt="<%=row[1]%>"></a></li>

       <% end %>
       <% end %>

    </ul>

Answer 1

我的问题就在这里。

//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
}

我不小心把 $(this).children 改成了 $(currentImage).children currentImage 是需要调用标题的时间/位置，所以我现在看到了我的错误。它在我睡梦中出现，完全忘记了，直到几分钟前我开始处理我的代码。