使用.next()方法更新lightbox中的图像链接

Question

我有一个图片库，当单击一个图像时，会出现一个灯箱，上面附加了单击的图像。lightbox还附加了一个按钮。我正在尝试编写代码，以便在单击按钮时，当前图像与lightbox分离，并将图库中的下一个图像附加到该图像之后。

如果您对我的错误之处有任何建议，将不胜感激。

HTML

    <div class="grid-container imageGallery">
    <div class="grid-3">
        <a href="img/item-01.png">
            <div class='image'>
                <img class="feat-img" src="img/item-01.png" alt='Image by 
                  Bob'/>
                <div class='text'></div>
            </div>
        </a>
        <!-- <p class='caption'>Caption</p> -->
    </div>
    <div class="grid-3">
        <a href="img/item-02.png"><div class='image'>
            <img class="feat-img" src="img/item-02.png" alt='Image by Jim'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    <div class="grid-3">
        <a href="img/item-03.png"><div class='image'>
            <img class="feat-img" src="img/item-03.png" alt='Image by   
                 Johnny'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    <div class="grid-3">
        <a href="img/item-04.png"><div class='image'>
            <img class="feat-img" src="img/item-04.png" alt='Image by Dave'/>
                <div class='text'></div>
        </div></a>
        <p class='caption'>Caption</p>
    </div>
    </div>

jQuery

   $(document).ready(function(){
   //Problem: When user clicks on an image they are taken to a dead end.
   //Solution: Create an overlay with the image centered on it - Lightbox

var $lightbox = $('<div class ="lightbox"></div>');
var $lightboxImage = $('<img>');
var $nextLightboxImage = $('<img>');
var $button = $('<div id="nav-icon1"><span></span><span></span><span></span 
                 </div>');
var $caption = $('<p></p>');


//Add an image to overlay
$lightbox.append($lightboxImage);
//Add a caption to the overlay
$lightbox.append($caption);
//Add a button to the lightbox
$lightbox.append($button);
//Add overlay
$('body').append($lightbox);
//Capture the click event on a link to an image
$('.imageGallery a').click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr('href');
    // Update the overlay with the image that is clicked,
    $lightboxImage.attr('src', imageLocation);
    // Show the overlay.
    $lightbox.show();



    //1.3 Get the image alt attribute and set caption.
    var captionText = $(this).find('img').attr('alt');
    $caption.text(captionText);
});
//Append next image in gallery and detach current one when button is clicked  
  on
$button.click(function(){
    var nextImageLocation = $(this).next.attr('href');
    $nextLightboxImage.attr('src', nextImageLocation);
    $lightbox.detach($lightboxImage);
    $lightbox.append($nextLightboxImage);
});
//When the overlay is clicked
    //Hide the overlay.
$lightbox.click(function(){
    $lightbox.hide();
});
}):

所有的工作都是分开的

  $button.click(function(){
    var nextImageLocation = $(this).next.attr('href');
    $nextLightboxImage.attr('src', nextImageLocation);
    $lightbox.detach($lightboxImage);
    $lightbox.append($nextLightboxImage);
});

当按钮被点击时，它不会显示下一个图像。灯箱只是隐藏起来。

Answer 1

请使用以下命令：

$(document).on("click", "#nav-icon1", function(){

});