jQuery在模态打开/关闭时添加或删除类

Question

首先，感谢阅读。我对jQuery或JavaScript一无所知，这就是为什么我在这里。

寻找一点点我找到了我想要的代码，但不幸的是，我正在制作的画廊有几个元素，并且此代码不能按我的需要工作。

这是小脚本我有：

function showImage(imgName) { 
 
    var curImage = document.getElementById('currentImg'); 
 
    var thePath = '/images/full/'; 
 
    var theSource = thePath + imgName; 
 
    curImage.src = theSource; 
 
    curImage.alt = imgName; 
 
}

<span class="thumb_ef"><a href="#" class="activate_modal" name="first_window"><img src="images/thumb/image1.png" alt="Image One"/></a></span> 
 
<span class="thumb_ef"><a href="#" class="activate_modal" name="second_window"><img src="images/thumb/image2.png" alt="Image Two"/></a></span> 
 
<span class="thumb_ef"><a href="#" class="activate_modal" name="third_window"><img src="images/thumb/image3.png" alt="Image Three"/></a></span> 
 

 
<div id="first_window" class="modal_window"> 
 
    
 
    <h2>Title here</h2> 
 
    
 
    <div id="preview"> 
 
    <img id="currentImg" class="bigimg" src="images/full/image1.png" alt="images/full/image1.png"> 
 
    </div> 
 
    
 
    <h3>Thumbnail preview</h3> 
 
    
 
    <div id="thumb"> 
 
    <span class="thumb_mef"><img src="images/full/thumb_image1.png" alt="images/full/thumb_image1.png" onclick="showImage('image1.png');"></span> 
 
    <span class="thumb_mef"><img src="images/full/thumb_image2.png" alt="images/full/thumb_image2.png" onclick="showImage('image2.png');"></span> 
 
    <span class="thumb_mef"><img src="images/full/thumb_image3.png" alt="images/full/thumb_image3.png" onclick="showImage('image3.png');"></span> 
 
    <span class="thumb_mef"><img src="images/full/thumb_image4.png" alt="images/full/thumb_image4.png" onclick="showImage('image4.png');"></span> 
 
    </div> 
 
    
 
</div>

让我解释一下，因为我不会在这里把所有的代码unnecesary。

在图库中，我有几个小图片，点击它们，为每个图片触发一个带有不同ID的模式框，以便为每个元素加载不同的内容。

在模态中，我有一个标题，一个全尺寸图像和四个缩略图预览图像。此缩略图图像会触发我之前留下的代码，当您单击缩略图时，将全尺寸图像加载到相同的ID中。

我现在的问题是...我需要为不同的模态重复此ID，但是如果您想单击缩略图并加载任何其他不是第一个模态的全尺寸图像，不会看到更改（因为代码在第一个ID上工作）。

我认为解决这个问题的方法是在模式打开时添加ID（currentImg），并在模式关闭时删除此ID以解决问题。

我不知道该怎么做，大概我需要混合使用这两个代码，但再一次，我不知道的jQuery/JavaScript的东西，这里的模态代码：

$(document).ready(function(){ 
 
\t var window_width = $(window).width(); 
 
\t var window_height = $(window).height(); 
 

 
\t $('.modal_window').each(function(){ 
 
\t \t var modal_height = $(this).outerHeight(); 
 
\t var modal_width = $(this).outerWidth(); 
 
\t \t var top = (window_height-modal_height)/2; 
 
\t \t var left = (window_width-modal_width)/2; 
 
\t \t $(this).css({'top' : top , 'left' : left}); 
 
\t }); 
 
\t 
 
\t $('.activate_modal').click(function(){ 
 
\t \t var modal_id = $(this).attr('name'); 
 
\t \t show_modal(modal_id); 
 
\t }); 
 
\t 
 
\t $('.close_modal').click(function(){ 
 
\t \t close_modal(); 
 
\t }); 
 

 
\t function close_modal(){ 
 
\t \t $('#mask').fadeOut(500); 
 
\t \t $('.modal_window').fadeOut(500); 
 
\t } 
 

 
\t function show_modal(modal_id){ 
 
\t \t $('#mask').css({ 'display' : 'block', opacity : 0}); 
 
\t \t $('#mask').fadeTo(500,0.8); 
 
\t \t $('#'+modal_id).fadeIn(500); 
 
\t } 
 
});

希望你能理解，我的母语不是英语，请告诉我，如果你不明白。

Answer 1

修复：我唯一需要的是搜索模式框的ID，然后搜索img元素的类并添加一个ID。在此之后，在关闭模式事件中，从img类中删除任何ID。

这是最后的结果是：

$(document).ready(function(){ 
 
\t \t var window_width = $(window).width(); 
 
\t \t var window_height = $(window).height(); 
 

 
\t \t $('.modal_window').each(function(){ 
 
\t \t  var modal_height = $(this).outerHeight(); 
 
\t \t  var modal_width = $(this).outerWidth(); 
 
\t \t  var top = (window_height-modal_height)/2; 
 
\t \t  var left = (window_width-modal_width)/2; 
 
\t \t  $(this).css({'top' : top , 'left' : left}); 
 
\t \t }); 
 
\t 
 
\t \t $('.activate_modal').click(function(){ 
 
\t \t \t var modal_id = $(this).attr('name'); 
 
\t \t \t show_modal(modal_id); 
 
\t \t \t $('#'+modal_id).find('.bigimg').attr('id', 'currentImg'); 
 
\t \t }); 
 
\t 
 
\t \t $('.close_modal').click(function(){ 
 
\t \t \t $('.bigimg').removeAttr('id'); 
 
\t \t \t close_modal(); 
 
\t \t }); 
 

 
\t \t function close_modal(){ 
 
\t \t  $('#mask').fadeOut(500); 
 
\t \t  $('.modal_window').fadeOut(500); 
 
\t \t } 
 

 
\t \t function show_modal(modal_id){ 
 
\t \t  $('#mask').css({ 'display' : 'block', opacity : 0}); 
 
\t \t  $('#mask').fadeTo(500,0.8); 
 
\t \t  $('#'+modal_id).fadeIn(500); 
 
\t \t } 
 
\t });