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>

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

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

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

我遇到的问题是......我需要为不同的模态重复此ID，但是如果你想点击缩略图并加载任何其他模态的全尺寸图像，那么你不是第一个会看到更改（因为代码适用于第一个ID）。

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

我不知道该怎么做，可能我需要混合两个代码但是，我对jQuery / Javascript一无所知，这里是模态代码：

$(document).ready(function(){
	var window_width = $(window).width();  
	var window_height = $(window).height();  

	$('.modal_window').each(function(){
		var modal_height = $(this).outerHeight();
	var modal_width = $(this).outerWidth();
		var top = (window_height-modal_height) / 2;  
		var left = (window_width-modal_width) / 2;  
		$(this).css({'top' : top , 'left' : left});  
	});  
	  
	$('.activate_modal').click(function(){  
		var modal_id = $(this).attr('name');  
		show_modal(modal_id);
	});  
	  
	$('.close_modal').click(function(){  
		close_modal();  
	}); 

	function close_modal(){  
		$('#mask').fadeOut(500);  
		$('.modal_window').fadeOut(500);  
	}

	function show_modal(modal_id){  
		$('#mask').css({ 'display' : 'block', opacity : 0});
		$('#mask').fadeTo(500,0.8);  
		$('#'+modal_id).fadeIn(500);  
	}
});

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

Answer 1

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

这是最终结果：

＆＃13;

$(document).ready(function(){
		var window_width = $(window).width();  
		var window_height = $(window).height();  

		$('.modal_window').each(function(){
		    var modal_height = $(this).outerHeight();  
		    var modal_width = $(this).outerWidth();  
		    var top = (window_height-modal_height) / 2;  
		    var left = (window_width-modal_width) / 2;  
		    $(this).css({'top' : top , 'left' : left});  
		});  
	  
		$('.activate_modal').click(function(){  
			var modal_id = $(this).attr('name');  
			show_modal(modal_id);
			$('#'+modal_id).find('.bigimg').attr('id', 'currentImg');
		});  
	  
		$('.close_modal').click(function(){
			$('.bigimg').removeAttr('id');
			close_modal();
		}); 

		function close_modal(){  
		    $('#mask').fadeOut(500);  
		    $('.modal_window').fadeOut(500);  
		}

		function show_modal(modal_id){  
		    $('#mask').css({ 'display' : 'block', opacity : 0});
		    $('#mask').fadeTo(500,0.8);  
		    $('#'+modal_id).fadeIn(500);
		}
	});

＆＃13;

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

1 个答案: