我可以将存储为对象的文本写入具有 JavaScript 的图像标签的“alt”属性吗？

Question

我在 MDN 获得了创建图片库的任务。 这些是要求：

声明一个 const 数组，列出每个图像的文件名，例如'pic1.jpg'
声明一个 const object 列出每个图像的替代文本。
遍历文件名数组，并为每个文件名在“.thumb-bar” div 元素内插入一个 img-tag，该元素将该图像及其替代文本嵌入页面中。
为“thumb-bar” div 元素内的每个 img-tag 添加一个单击事件侦听器，以便在单击它们时，相应的图像和替代文本会显示在显示的 img-tag 中。
向按钮元素添加一个单击事件侦听器，以便在单击它时将变暗效果应用于全尺寸图像。 再次单击时，变暗效果再次被移除。

如果您能帮助我完成这项完整的任务，我将不胜感激。 虽然，我真正需要帮助的地方是在第三部分，我将在其中包含每个图像及其替代文本。 这部分非常简单（可能是因为图像存储在 arrays 中 - 可以轻松循环 - 与对象不同）。 但我被困在每个图像源的替代文本上。

您会注意到，与图像源不同，每个图像的替代文本都存储为Objects 。

在开发工具中，我看到我能够包含 alt-text，但问题是只有一个文本被注入到所有 img-tags 中。 就在我以为我即将完成第三部分时，我遇到了这个问题。

您还会注意到，我尝试将替代文本的Object转换为替代文本数组。

 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>

请帮忙。

Answer 1

您可以将 object 转换为数组，但您可以很容易地计算使用从 object 获取值的密钥。

 /* 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))

Answer 2

这是简短而简单的解决方案。

而不是使用 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);
});

我可以将存储为对象的文本写入具有 JavaScript 的图像标签的“alt”属性吗？

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-09-06 17:39:04

解决方案2
0 2022-09-06 18:04:14

我可以将存储为对象的文本写入具有 JavaScript 的图像标签的“alt”属性吗？

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-09-06 17:39:04

解决方案2 0 2022-09-06 18:04:14

解决方案1
1 已采纳 2022-09-06 17:39:04

解决方案2
0 2022-09-06 18:04:14