Question

我正在创建一个带有模态组合的网站，但我只想在点击它之后在页面上加载完整大小的图像。模态本身工作正常，但是当页面打开时，每个图像都会立即加载。

我想出了一个解决方案，但我无法让我的modalImg.src工作。它根据我的需要设定它的价值，但在网页上却没有真正起作用。

function imgClicked(imgId){

			var modal = document.getElementById("myModal" + imgId);
			var modalImg = "m" + imgId
			
			modal.style.display = "block";
			modalImg.src = "img/port0" + imgId + ".png";
			
			var span = document.getElementById("close" + imgId);
			
			span.onclick = function() { 
				modal.style.display = "none";
			}
		}

<div class="item"><img src="img/mobile/port001.png" class="imgequipe" id="01" onClick="imgClicked(this.id)"></div>
		<div id="myModal01" class="modal">
		  <span class="close" id="close01">&times;</span>
		  <img class="modal-content" id="m01">
		</div>

如果我设置并提醒我显示变量modalImg，则将其设置为我想要的值，但它并未真正更改图像src属性。

已解决 - 我的问题是我正在设置一个String变量，所以我声明了

modalImg = document.getElementById("m" + imgId);

并且有效。

Answer 1

我真的不知道modalImg的意图，但是您将DOM图像对象存储在变量modal中。因此，您需要做的是在.src上设置modal，而不是modalImg。可能是一个错字。

modal.src = "img/port0" + imgId + ".png";

编辑;评论中的问题已解决。

myVar.src没有设置我的图像src

1 个答案: