你好！ ð
我是巴西工程师卢卡斯（Lucas），这是 又是另一个没有人要求的开发内容（但是我还是做到了）。我在这个博客上的目标是谈论与软件开发世界有关的事情，并记录我从事的个人项目，同时还通过共享最近获得的知识来磨练知识。如果您喜欢它，请关注我以获取更多这样的帖子！
今天，我们将解决一个名为 Image Gallery 的小型JavaScript项目，其中一个MDN的JavaScript教程中出现了。
请注意，这是我解决这一挑战的方法，可能不是您在那里发现的最好的挑战。另请注意，代码以本文显示的方式并非总是代表最终文件。如果要检查最终代码，则在文章末尾的参考部分中提供了指向GITHUB存储库的链接以及已部署应用程序的链接。
。下面的GIF显示了我们完成的项目的样子。让我们构建它！
ð£分步故障
MDN tutorial提供了该项目的初始样板代码和我们将要使用的所有五个图像。
我们不会详细介绍HTML的构造方式，也不会详细介绍其样式，因为这里的目标是专注于JavaScript部分。
如果打开样板 index.html 文件，这就是它最初的样子：
您可以立即注意到缩略图图像缺少，并且该按钮目前尚无功能。因此，这就是我们要分步的操作：
- 声明图像文件名的数组并将其附加到DOM（在拇指栏内）;
- 将单击事件处理程序添加到每个缩略图;
- 将单击事件处理程序添加到“变暗/亮”按钮。
1页将缩略图图像添加到DOM
我们可以通过首先声明一个常数数组来为我们保存图像文件名来做到这一点。这是一个可行的替代方法，因为我们知道图像的数量较低且静态（五）。
然后是时候声明每个图像具有ALT描述的对象了。对于提高应用程序的可访问性而言，此步骤非常重要，并且经常被忽略。我选择使用文件名作为键，因此更容易在下一步中检索我们想要的值。
我们还需要存储对Thumb Bar Div HTML元素的引用，因此我们可以接下来将图像附加到其上。幸运的是，这已经在样板代码中作为 thumbbar 常数提供了。
/**
File: "~/main.js"
Showing: Only code related to step 1
*/
const thumbBar = document.querySelector('.thumb-bar');
/* Declaring the array of image filenames */
const imageFilenames = [
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg',
];
/* Declaring the alternative text for each image file */
const altTexts = {
'pic1.jpg': 'A closeup of an human eye',
'pic2.jpg': 'An abstract pattern painting',
'pic3.jpg': 'A lot of violet and white flowers',
'pic4.jpg': 'An Egyptian painting in a wall',
'pic5.jpg': 'A yellow butterfly in a leaf',
};
接下来，我们将使用foreach方法循环遍历数组，以便我们可以附加图像。图像元素将在循环的每次迭代中创建，所需的HTML属性将添加，最后将作为拇指栏容器div的孩子附加该元素。
/**
File: "~/main.js"
Showing: Only code related to step 1
*/
/* Looping through images */
imageFilenames.forEach((imageName) => {
const newImage = document.createElement('img');
newImage.setAttribute('src', `images/${imageName}`);
newImage.setAttribute('alt', altTexts[imageName]);
thumbBar.appendChild(newImage);
});
这样，我们已经完成了第一步。同样，我们不会深入研究它的样式。这就是现在应该这样做的：
2页£在每个缩略图图像中添加单击事件处理程序
我们要实现的下一步是在用户单击我们添加的任何缩略图图像时更改显示的图像（较大图像）。为了实现这一目标，我们将需要像对拇指栏容器一样对显示的图像元素进行引用，但是在样板代码中也已经声明了它。
让我们创建一个函数来处理图像上的单击事件。任何作为回调传递给 addeventListener（）方法的函数将自动通过该事件作为参数传递。事件对象具有a target 属性，该属性具有触发事件的HTML元素的引用。我们将使用目标元素，以便我们知道单击图像的新SRC和ALT属性，并更改显示的图像的属性以等于目标图像。
/**
File: "~/main.js"
Showing: Only code related to step 2
*/
function handleImageClick({ target }) {
displayedImage.setAttribute('src', target.getAttribute('src'));
displayedImage.setAttribute('alt', target.getAttribute('alt'));
}
const displayedImage = document.querySelector('.displayed-img');
/* Looping through images */
imageFilenames.forEach((imageName) => {
const newImage = document.createElement('img');
newImage.setAttribute('src', `images/${imageName}`);
newImage.setAttribute('alt', altTexts[imageName]);
thumbBar.appendChild(newImage);
img.addEventListener('click', handleImageClick);
});
这样，我们已经成功实现了步骤2，只缺少最后一部分！
3页，将点击事件处理程序添加到DAMBER/LITEDEN BUTTEN
为了实现我们想要的第三步和最后一步中的目标，让我们创建一个函数来处理按钮上的单击事件。此功能应读取按钮的类名称值，并根据结果采取两个操作之一。
如果类是“黑暗”，则表示用户单击“深色”按钮。发生这种情况时，按钮的文本内容应更改为“减轻”，覆盖div背景不透明度应更改为“ 0.5”，最后类名称应更改为“ light”，因此下一次点击发生时，操作会更改。
否则这意味着课程为“光”。在这种情况下，按钮文本内容应更改为“减轻”，覆盖划分的不透明度应更改为“ 0”，因此它再次变得不可见，最后类名称应更改为“ Dark”，因此当下一次点击发生时，操作会更改。
/**
File: "~/main.js"
Showing: Only code related to step 3
*/
/* Wiring up the Darken/Lighten button */
function handleButtonClick() {
let currentClass = btn.getAttribute('class');
if (currentClass === 'dark') {
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
btn.setAttribute('class', 'light');
} else {
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
btn.setAttribute('class', 'dark');
}
}
btn.addEventListener('click', handleButtonClick);
我们完成了！这就是按钮功能现在的样子：
如果您阅读了这么远，希望内容为您添加了一些东西。如果没有，请记住：这只是另一个普通的开发内容ð。
ð请参阅ya！
ð参考
Image gallery - Learn web development | MDN
Image gallery finished example
Github repository with the final code
Final app deployed on Github Actions