我在 MDN 獲得了創建圖片庫的任務。這些是要求：
- 宣告一個 const 陣列，列出每個影像的檔案名，例如 'pic1.jpg'
- 宣告一個 const 物件，列出每個影像的替代文本。
- 遍歷檔案名陣列，并為每個檔案名在“.thumb-bar” div 元素內插入一個 img-tag，該元素將該影像及其替代文本嵌入頁面中。
- 為“thumb-bar” div 元素內的每個 img-tag 添加一個單擊事件偵聽器，以便在單擊它們時，相應的影像和替代文本會顯示在顯示的 img-tag 中。
- 向按鈕元素添加一個單擊事件偵聽器，以便在單擊它時將變暗效果應用于全尺寸影像。再次單擊時，變暗效果再次被移除。
如果您能幫助我完成這項完整的任務，我將不勝感激。雖然，我真正需要幫助的地方是在第三部分，我將在其中包含每個影像及其替代文本。這部分非常簡單（可能是因為影像存盤在陣列中 - 可以很容易地回圈 - 不像物件）。但我被困在每個影像源的替代文本上。
您會注意到，與影像源不同，每個影像的替代文本都存盤為Objects。
在開發工具中，我看到我能夠包含 alt-text，但問題是只有一個文本被注入到所有 img-tags 中。就在我以為我即將完成第三部分時，我遇到了這個問題。
您還會注意到，我嘗試將 alt 文本的Object轉換為 alt 文本陣列。
const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');
/* Declaring the array of image filenames */
const imagesArrayOfFileNames = ['https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg', 'https://images.pexels.com/photos/3769151/pexels-photo-3769151.jpeg', 'https://images.pexels.com/photos/2724748/pexels-photo-2724748.jpeg', 'https://images.pexels.com/photos/1462630/pexels-photo-1462630.jpeg', 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg']
const imageAltText = new Object()
imageAltText.name1 = 'Child reading a bible'
imageAltText.name2 = 'Woman in hospital bed'
imageAltText.name3 = 'Kitchen view of a house'
imageAltText.name4 = 'A girl\'s photo at school'
imageAltText.name5 = 'Two workers at an industry'
/* Looping through images */
for (let imgFileName of imagesArrayOfFileNames) {
const newImage = document.createElement('img');
newImage.setAttribute('src', imgFileName);
// convert object to array
Object.keys(imageAltText).forEach(function(altKey, altVal) {
newImage.setAttribute('alt', imageAltText[altKey]);
})
thumbBar.appendChild(newImage);
}
/* Wiring up the Darken/Lighten button */h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
/*min-width: 640px;*/
width: 640px;
height: 480px;
}
.full-img img {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0, 0, 0, 0);
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Image gallery</title>
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg" alt="Closeup of a human eye" />
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar"></div>
</body>
</html>請幫忙。
uj5u.com熱心網友回復：
您可以將物件轉換為陣列，但您可以很容易地計算密鑰以使用從物件中獲取值。
/* Declaring the array of image filenames */
const imagesArrayOfFileNames = ['https://images.pexels.com/photos/935944/pexels-photo-935944.jpeg', 'https://images.pexels.com/photos/3769151/pexels-photo-3769151.jpeg', 'https://images.pexels.com/photos/2724748/pexels-photo-2724748.jpeg', 'https://images.pexels.com/photos/1462630/pexels-photo-1462630.jpeg', 'https://images.pexels.com/photos/1216589/pexels-photo-1216589.jpeg']
const imageAltText = new Object()
imageAltText.name1 = 'Child reading a bible'
imageAltText.name2 = 'Woman in hospital bed'
imageAltText.name3 = 'Kitchen view of a house'
imageAltText.name4 = 'A girl\'s photo at school'
imageAltText.name5 = 'Two workers at an industry'
/* Looping through images */
imagesArrayOfFileNames.forEach(function (imgFileName, index) {
const newImage = document.createElement('img');
newImage.setAttribute('src', imgFileName);
newImage.setAttribute('alt', imageAltText['name' (index 1)]);
console.log(newImage)
// thumbBar.appendChild(newImage);
});
// Alternatively, convert to array:
console.log(Object.values(imageAltText))uj5u.com熱心網友回復：
這是簡短而簡單的解決方案。
而不是使用 for 回圈，只需使用 foreach 回圈。
$.each(imagesArrayOfFileNames, function (altKey, imgFileName) {
const newImage = document.createElement('img');
newImage.setAttribute('src', imgFileName);
newImage.setAttribute('alt', Object.values(imageAltText)[altKey]);
// console.log('img', newImage);
thumbBar.appendChild(newImage);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/505122.html
標籤：javascript html css