javascript - 将标题添加到 Bootstrap 响应式模态图像库

Question

我通过 Bootstrap 有一个响应式模态图像库，我是编码的初学者。我的图像成功地向前和向后滑动，直到我尝试添加标题。

我在我的 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 = 函数(图像编号){

和

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

到我的 .popup、nextImage 和 previousImage 函数