为动态生成元素设置独立悬停提示：JavaScript对象与Map的应用

本教程探讨如何在javascript中为从数组或类似结构动态生成的每个html元素设置独一无二的悬停描述。针对这一常见需求，文章详细介绍了如何利用javascript对象和map数据结构来存储元素名称与对应描述的映射关系，并通过遍历这些结构来动态创建带有独特title属性的html元素，确保每个元素在鼠标悬停时都能显示其专属提示信息。

在前端开发中，我们经常需要根据数据动态生成HTML元素列表。一个常见的需求是，当用户鼠标悬停在列表中的每个元素上时，显示一个独一无二的描述或提示信息。例如，你可能有一个人名列表，希望每个名字在悬停时都能显示其对应的个性化介绍。

直接在循环外部为所有元素设置一个统一的title属性显然无法满足需求，因为这样每个动态生成的元素都会拥有相同的悬停描述。解决这个问题的关键在于，为每个元素的数据项关联其专属的描述，并在元素生成时将其作为title属性值动态赋给对应的HTML标签。

解决方案一：利用JavaScript对象进行映射

当数据项的顺序不重要时，JavaScript对象（Object）是一个非常高效且直观的选择，用于存储名称到描述的映射关系。对象通过键值对的形式，将每个名称（键）与其对应的描述（值）关联起来。

实现步骤：

立即学习“Java免费学习笔记（深入）”；

1. 定义映射对象： 创建一个JavaScript对象，其中键是你要显示在页面上的名称，值是对应的悬停描述。

   const namesWithDescriptions = {
       'Bob': '这是Bob，我的朋友',
       'Joe': '这是Joe，一位同事',
       'Bill': '这是Bill，一个随机路人',
   };

2. 遍历对象并生成元素： 使用for...in循环遍历这个对象。在每次迭代中，你可以访问到键（名称）和值（描述），然后利用它们动态创建带有title属性的HTML元素。

   // 假设你有一个元素，或者其他你希望添加元素的容器
   const bodyElement = document.querySelector('body'); 
   
   for (const name in namesWithDescriptions) {
       // 创建一个标签，将描述作为其title属性，名称作为其文本内容
       const linkElement = document.createElement('a');
       linkElement.title = namesWithDescriptions[name]; // 设置悬停描述
       linkElement.textContent = name; // 设置显示文本
       linkElement.style.marginRight = '10px'; // 仅为示例添加样式
       linkElement.style.textDecoration = 'none';
       linkElement.style.color = 'blue';
   
       bodyElement.append(linkElement); // 将元素添加到页面
   }

DeepL

DeepL是一款强大的在线AI翻译工具，可以翻译31种不同语言的文本，并可以处理PDF、Word、PowerPoint等文档文件

下载

• JavaScript对象的键查找时间复杂度通常为O(1)，这使得它在处理大量数据时表现出色。
• 然而，JavaScript对象本身不保证键的顺序。如果你对元素的显示顺序有严格要求，可能需要考虑其他方案。

解决方案二：利用JavaScript Map进行有序映射

如果你的数据项需要保持特定的插入顺序，或者你希望使用非字符串类型的键，那么JavaScript的Map对象是更合适的选择。Map是一种有序的键值对集合，它会记住键的原始插入顺序。

实现步骤：

立即学习“Java免费学习笔记（深入）”；

1. 定义Map对象： 创建一个Map实例，并使用set()方法添加名称到描述的映射。

   const namesWithDescriptionsMap = new Map();
   namesWithDescriptionsMap.set('Bob', '这是Bob，我的朋友');
   namesWithDescriptionsMap.set('Joe', '这是Joe，一位同事');
   namesWithDescriptionsMap.set('Bill', '这是Bill，一个随机路人');

2. 遍历Map并生成元素： 使用for...of循环遍历Map。每次迭代会返回一个包含键和值的数组，你可以从中提取名称和描述来生成HTML元素。

   const bodyElement = document.querySelector('body'); 
   
   for (const [name, description] of namesWithDescriptionsMap) {
       // 创建一个标签，将描述作为其title属性，名称作为其文本内容
       const linkElement = document.createElement('a');
       linkElement.title = description; // 设置悬停描述
       linkElement.textContent = name; // 设置显示文本
       linkElement.style.marginRight = '10px'; // 仅为示例添加样式
       linkElement.style.textDecoration = 'none';
       linkElement.style.color = 'green';
   
       bodyElement.append(linkElement); // 将元素添加到页面
   }