根据我动态悬停的图标显示文本

Question

所以我不久前完成了一个编码训练营，但我还是 Javascript 的新手。我在寻找创建动态代码的解决方案时遇到问题。基本上，我在团队中的每个员工下面都有一个电子邮件图标，当鼠标悬停在该图标上时，我希望它显示他们的电子邮件。我可以对此进行硬编码，但我们有多个团队页面，其中包含不同数量的员工。

                <div class="member">
                    <img class="member-img" src="/assets/images/signage/example.png" alt="">
                    <h5 class="member-details">example</h5>
                    <img onmouseover="showEmail()" onmouseleave="hideEmail()" class="email-icon" id="emailIcon2" src="/assets/images/email-asset-128-fix.png" alt="">
                    <h5 class="email-txt" id="emailTxt">example@email.com</h5>
                </div>

特别是在这个页面上，我为每个团队成员提供了另外 3 个这样的 div。我已使用以下代码将图标和电子邮件文本 h5s 放入数组中。

const allIcons = [];

$('.email-icon').each(function() {
    allIcons.push(this);
});

console.log(allIcons);

const allEmails = [];

$('.email-txt').each(function() {
    allEmails.push(this);
})

console.log(allEmails);

作为 Javascript 的新手，我正在努力弄清楚我应该在这里做什么，但我无法在网上找到类似的解决方案。我希望它是当我将鼠标悬停在图标 1 上时它显示电子邮件 1 等等，同样适用于 onmouseleave 我只是想再次隐藏 h5。我的 css 电子邮件文本如下。

.email-txt {
    color: #474747;
    margin: 0;
    padding: 3px;
    transform: translateY(-260%);
    border-style: solid;
    border-radius: 5px;
    border-color: #474747;
    background-color: darkgray;
    color: black;
    display: none;
}

我试过这个解决方案

我不知道是我做的不对还是无法让它发挥作用。

也请随意判断我的代码，建议越多越好:)。谢谢！

Answer 1

假设电子邮件地址在一个数组中，您需要做的就是生成一个新图像，并将其 title 属性设置为每个数组条目的电子邮件地址：

["1@2.com", "3@4.com", "4@5.com", "5@6.com"].forEach(function(item){
  let link = document.createElement("a");               // Create dynamic anchor
  link.href = "mailto:" + item;                         // Set link to go to array item
  let img = document.createElement("img");              // Create dynamic image
  img.alt = item;                                       // Set the required alt attribute
  img.src = "https://illustoon.com/photo/dl/2751.png";  // Set image source
  img.title = item;                                     // Set the tooltip for the image to the array item
  link.append(img);                                     // Put the image in the anchor
  document.body.append(link);                           // Put the anchor on the page
});

img { width: 30px; }

<p>Hover over each icon to see the email address

注释：

不要在数组中存储 HTML 元素 - 它们已经在 DOM 中，因此没有理由再维护它们的第二个列表。只需将要使用的数据存储在数组中即可。

不要使用标题 (<h1>...<h6>)，因为浏览器会设置文本样式。标题用于定义文档结构，对于那些使用辅助技术（如屏幕阅读器）浏览网页的人来说是必不可少的。 <h5> 只会用于 sub-divide 现有的 <h4> 部分。 <h4> 应该只用于 sub-divide 和 <h3> 部分，依此类推。

您正在代码中使用 JQuery。虽然 JQuery 本身并没有什么问题，但它被广泛过度用于解决简单的编码场景。你这里的情况很简单，确实不能保证JQuery。在学习 JavaScript 库和框架之前先学习 JavaScript。

Answer 2

您可以使用 CSS 来处理悬停效果，如果可能的话 CSS 比 JS 更适合处理这些场景：

const employees = [{
  email: "member1@email.com",
  img: ""
}, {
  email: "member2@email.com",
  img: ""
}, {
  email: "member3@email.com",
  img: ""
}, {
  email: "member4@email.com",
  img: ""
}]


employees.forEach(d => {
  const html = ` <div class="member">
                    <div class="member-img">${d.img} </>
                    <h5 class="member-details">${d.email.match(/.*(?=@)/)}</h5>
                    <div class="email-icon">✉️<h5 class="email-txt" id="emailTxt">${d.email}</h5></div>
                </div>`
  root.innerHTML += html
})

#root {
  display: flex;
  justify-content: center;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.email-icon {
  position: relative;
  font-size: 3rem;
  cursor: pointer;
}

.email-txt {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
}

.email-icon:hover .email-txt {
  display: block;
}

<div id="root"></div>

根据我动态悬停的图标显示文本

Showing text depending on what Icon I have hovered over dynamically

html

javascript

css

arrays

dynamic