在循环中触发onclick事件时，如何重置变量值

我有几个涵盖不同类别的图片库，在下面的代码中，我只包含了2个(自然和城市)，以便于阅读。我在onclick事件之前使用了一个带有"let"的"for"循环，这样就可以点击HTML集合中的任何节点，并获得索引。然后我将这个索引应用于一组相同的图像，除了它们是HD而不是缩略图。

"rightArrow"one_answers"leftArrow"div用于通过将索引增加或减少一来移动到数组中的下一个或上一个图像，这是非常标准的。问题是，当我退出全屏模式时，索引更改尚未重置。因此，当用户点击同一图库中的另一张图像以重新打开全屏模式时，他们不会得到相应的图像。

那么，在触发"natureThumbnailImgs"one_answers"urbanThumbnail Imgs"的onclick事件之前，我如何重置索引呢？或者在重置索引的"exitFullscreen"事件中包含一些内容？

非常感谢您的帮助，

Steve

var fullscreen = document.getElementsByClassName("fullscreen");
var fullImg = document.getElementById("fullImg");
var exitFullscreen = document.getElementById("exitFullscreen");
var rightArrow = document.getElementById("rightArrow");
var leftArrow = document.getElementById("leftArrow");
exitFullscreen.onclick = function() {
fullscreen[0].removeAttribute("id", "showFullscreen"); 
}
var natureThumbnailImgs = document.getElementsByClassName("natureThumbnailImgs");
var natureHDImgs = ["1 nature HD.jpg", "2 nature HD.jpg", "3 nature HD.jpg"];
// NATURE GALLERY ALBUM
for (let albumIndex = 0; albumIndex < natureThumbnailImgs.length; albumIndex++) {
natureThumbnailImgs[albumIndex].onclick = function() {
//DISPLAY FULLSCREEN
fullscreen[0].setAttribute("id", "showFullscreen");
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];
//NEXT
rightArrow.onclick = function() {
if (albumIndex < (natureThumbnailImgs.length - 1)) {
albumIndex++;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];
}
}

//PREV
leftArrow.onclick = function() {
if (albumIndex > 0) {
albumIndex--;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[albumIndex];
}
}
}
}

var urbanThumbnailImgs = document.getElementsByClassName("urbanThumbnailImgs");
var urbanHDImgs = ["1 urban HD.jpg", "2 urban HD.jpg", "3 urban HD.jpg"];

// URBAN GALLERY ALBUM 
for (let albumIndex = 0; albumIndex < urbanThumbnailImgs.length; albumIndex++) {
urbanThumbnailImgs[albumIndex].onclick = function() {
//DISPLAY FULLSCREEN
fullscreen[0].setAttribute("id", "showFullscreen");
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];
//NEXT
rightArrow.onclick = function() {
if (albumIndex < (urbanThumbnailImgs.length - 1)) {
albumIndex++;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];
}
}
//PREV
leftArrow.onclick = function() {
if (albumIndex > 0) {
albumIndex--;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + urbanHDImgs[albumIndex];
}
}
}
}

[class$="ThumbnailImgs"] {
width: 100px;
height: auto;
}
#fullscreen {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1;
}
#fullscreen {
position: absolute;
top: 50px;
right: 50px;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Image Gallery</title>
<link href="css/IG.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- NATURE ALBUM -->
<div id="natureAlbum">
<img class="natureThumbnailImgs" src="../../../Image Bank/1 nature thumbnail.jpeg"/>
<img class="natureThumbnailImgs" src="../../../Image Bank/2 nature thumbnail.jpeg"/>
<img class="natureThumbnailImgs" src="../../../Image Bank/3 nature thumbnail.jpeg"/>
</div>
<!-- URBAN ALBUM -->
<div id="urbanAlbum">
<img class="urbanThumbnailImgs" src="../../../Image Bank/1 urban thumbnail.jpeg"/>
<img class="urbanThumbnailImgs" src="../../../Image Bank/2 urban thumbnail.jpeg"/>
<img class="urbanThumbnailImgs" src="../../../Image Bank/3 urban thumbnail.jpeg"/>
</div>
<!-- FULL IMG DISPLAY -->
<div id="fullscreen">
<div id="exitFullscreen">X</div>
<img id="fullImg" src=""/>
<div id="leftArrow">Left Arrow Symbol</div>
<div id="rightArrow">Right Arrow Symbol</div>
</div>
</body>
</html>

首先不要更新相册索引-每次单击缩略图时都要复制一份。单个图库的模式可能看起来像：

// NATURE GALLERY ALBUM
for (let albumIndex = 0; albumIndex < natureThumbnailImgs.length; albumIndex++) {
natureThumbnailImgs[albumIndex].onclick = function() {
index = albumIndex;   // copy the base album index
//DISPLAY FULLSCREEN
fullscreen[0].setAttribute("id", "showFullscreen");
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[index];
//NEXT
rightArrow.onclick = function() {
if (index < (natureThumbnailImgs.length - 1)) {
index++;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[index];
}
}
//PREV
leftArrow.onclick = function() {
if (index > 0) {
index--;
//APPLY CHOSEN IMAGE
fullImg.src = "../../../Image Bank/" + natureHDImgs[index];
}
}
}
}

这至少应该产生与发布的代码不同的行为。

我为延迟道歉，我最终花了很多时间处理您的代码，这里有很多事情要做：

查看演示：https://codesandbox.io/s/lx4x66rq9

点数：

在每个图像上创建一个索引属性，以帮助您跟踪正在单击的内容
将图像的hd路径存储为图像上的数据属性
创建一个单独的变量来跟踪活动图像，并在关闭全屏时将其清除

JS：

var fullscreen = document.getElementsByClassName("fullscreen");
var fullImg = document.getElementById("fullImg");
var exitFullscreen = document.getElementById("exitFullscreen");
var urbanThumbnailImgs = document.getElementsByClassName("urbanThumbnailImgs");
var activeImage = 0;
exitFullscreen.onclick = function() {
fullscreen[0].removeAttribute("id", "showFullscreen");
activeImage = 0;
};
var natureThumbnailImgs = document.getElementsByClassName(
"natureThumbnailImgs"
);
// NATURE GALLERY ALBUM
createImages(natureThumbnailImgs);
createImages(urbanThumbnailImgs);
function createImages(images) {
for (var albumIndex = 0; albumIndex < images.length; albumIndex++) {
images[albumIndex].setAttribute("data-index", albumIndex);
images[albumIndex].onclick = function(el) {
fullscreen[0].setAttribute("id", "showFullscreen");
fullImg.src = el.target.dataset.hd;
var rightArrow = document.getElementById("rightArrow");
var leftArrow = document.getElementById("leftArrow");
activeImage = parseInt(el.target.dataset.index);
//NEXT
rightArrow.onclick = function() {
if (activeImage < images.length - 1) {
activeImage++;
fullImg.src = images[activeImage].dataset.hd;
}
};
//PREV
leftArrow.onclick = function() {
if (activeImage > 0) {
activeImage--;
fullImg.src = images[activeImage].dataset.hd;
}
};
};
}
}

相关内容

最新更新

热门标签：