向 Bootstrap 响应式模态图像库添加标题

Question

我通过引导程序有一个响应式模态图像库，而且我是编码初学者。在我尝试添加字幕之前，我的图像可以成功地前后滑动。

我已经在我的 javascript 中为每张图片添加了悬停字幕：

  $(".popup").wrap('<div class="alt-wrap"/>')

  $('.modal-body>caption').remove();

   $(".popup").each(function() {
   $(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');

})

现在，每当我点击我的模态图像时，悬停标题都可以正常工作，但一旦我点击下一个/上一个，旧图像仍然存在。

当我通过模态框单击下一个/上一个时，如何删除旧的图像/标题？

我的 js 的其余部分如下所示：

 var imagesList = $("div#imagesList");
    var imagesListLength = imagesList.children().length;

    var showImageGallery = function(imageNumber){

        $('.modal-body>img').remove();

        $('#imageModal').modal('show');


        var image = imagesList.children()[imageNumber];
        $(image).clone().appendTo('.modal-body');

        $("#currentImageNumber").text(imageNumber);

    }

    var nextImage = function(){

        $('.modal-body>img').remove();

        var nextNum = parseInt($("#currentImageNumber").text());
        if(nextNum == imagesListLength-1){ nextNum = -1;}
        $("#currentImageNumber").text(nextNum+1);

        var image = imagesList.children()[nextNum+1];
        $(image).clone().appendTo('.modal-body');

    }


    var previousImage = function(){

        $('.modal-body>img').remove();

        var previousNum = parseInt($("#currentImageNumber").text());
        if(previousNum == 0){ previousNum = imagesListLength;}
        $("#currentImageNumber").text(previousNum-1);

        var image = imagesList.children()[previousNum-1];
        $(image).clone().appendTo('.modal-body');


    }

$(window).keydown(function(event) {
  if (event.key === 'ArrowLeft') {
    previousImage();
  } 
  if (event.key === 'ArrowRight') {
    nextImage();
  }
  if (event.key === 'Escape') {
    $('#close-modal').trigger('click')
  }
})

Answer 1

我只需要补充：

 $('.modal-body>.alt-wrap').remove();

下

var showImageGallery = function(imageNumber){

和

  $('.modal-body>.alt-wrap').remove();

到我的 .popup、nextImage 和 previousImage 函数