Javascript Jquery Lightbox/Modal在单击时会加倍

我对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");
};

jQuery（函数（$）{
$（'img'）。单击（函数（）{
var image=$（this.attr（“src”）；
var caption=$（this.attr（“alt”）；
变量出现_caption=”“+caption+“”
var出现_image=“”；
显示图像=显示图像.concat（“”）；
var缩略图=$（“缩略图”）；
$（“.thumbnails”）.css（“zIndex”，“100”）；
$（“.thumbnails”）.css（“display”、“flex”）；
$（'body'）。追加（显示图像）；
$（'body'）。追加（显示标题）；
});
});
函数closeImage（）{
$（'#出现_image_div'）。删除（）；
$（“#显示_图像”）.remove（）；
$（“#出现#标题”）.remove（）；
$（“.thumbnails”）.css（“显示”、“无”）；
};

单击图像时调用close，以便删除以前打开的画廊灯箱/Modal

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");
};

jQuery（函数（$）{
$（'img'）。单击（函数（）{
closeImage（）；
var image=$（this.attr（“src”）；
var caption=$（this.attr（“alt”）；
变量出现_caption=”“+caption+“”
var出现_image=“”；
显示图像=显示图像.concat（“”）；
var缩略图=$（“缩略图”）；
$（“.thumbnails”）.css（“zIndex”，“100”）；
$（“.thumbnails”）.css（“display”、“flex”）；
$（'body'）。追加（显示图像）；
$（'body'）。追加（显示标题）；
});
});
函数closeImage（）{
$（'#出现_image_div'）。删除（）；
$（“#显示_图像”）.remove（）；
$（“#出现#标题”）.remove（）；
$（“.thumbnails”）.css（“显示”、“无”）；
};

谢谢这对我帮助很大！