Jquery Lightbox/Modal Difficulties 自身加倍 onclick

Posted 2023-03-29

【中文标题】Jquery Lightbox/Modal Difficulties 自身加倍 onclick

【英文标题】：Jquery Lightbox/Modal Difficulties doubles itself onclick

【发布时间】：2019-01-23 07:53:49

【问题描述】：

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

【参考方案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");
;

【讨论】：

谢谢你帮了我很多忙！