Jquery Lightbox/Modal Difficulties 自身加倍 onclick

Question

我对 jQuery 很陌生，我的 Gallery Lightbox/Modal 有问题。 每次单击缩略图时，整个模式都会再次打开，我不知道我必须在哪里设置重置。 很高兴听到您的回答。

jQuery(function($) {
 $('img').click(function() {
 var image = $(this).attr("src");
 var caption = $(this).attr("alt");

var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");

    $(".thumbnails").css("zIndex", "100");
    $(".thumbnails").css("display", "flex");
    $('body').append(appear_image);
    $('body').append(appear_caption);
  });
});

 function closeImage() {
 $('#appear_image_div').remove();
 $('#appear_image').remove();
 $('#appear_caption').remove();
 $(".thumbnails").css("display", "none");
};

Answer 1

单击图像时调用关闭，以便删除任何以前打开的图库灯箱/模式

jQuery(function($) {
 $('img').click(function() {
 closeImage();
 var image = $(this).attr("src");
 var caption = $(this).attr("alt");

var appear_caption = "<figcaption id=appear_caption onClick='closeImage()'>"+caption+"</figcaption>"
var appear_image = "<div id='appear_image_div' onClick='closeImage()'></div>";
appear_image = appear_image.concat("<img id='appear_image' src='"+image+"'/>");
var thumbnails = $("thumbnails");

    $(".thumbnails").css("zIndex", "100");
    $(".thumbnails").css("display", "flex");


    $('body').append(appear_image);
    $('body').append(appear_caption);
  });
});

 function closeImage() {
 $('#appear_image_div').remove();
 $('#appear_image').remove();
 $('#appear_caption').remove();
 $(".thumbnails").css("display", "none");
};