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