显示文本取决于什么图标我已经悬停在动态

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">[e-mail]</h5>
</div>

具体来说，在这个页面上，我为每个团队成员准备了另外3个这样的div。我已经用下面的代码把icon和Email文本放到数组中。

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上时它会显示Email 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;
}

我已经尝试过这个解决方案改变图标的颜色时，悬停在相邻的文本与jQuery

我不知道是我做得不对还是怎么了，就是不能让它工作。

请随意评判我的代码，建议越多越好:)。谢谢!

Answer 1

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

["[e-mail]", "[e-mail]", "[e-mail]", "[e-mail]"].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>只用于细分现有的<h4>部分。<h4>只能用于细分<h3>部分，依此类推。

你在你的代码中使用JQuery。虽然JQuery本身没有什么问题，但它被广泛滥用于解决简单的编码场景。这里的情况非常简单，确实不需要使用JQuery。在学习JavaScript库和框架之前，先学习JavaScript。

Answer 2

你可以使用CSS来处理悬停效果，在可能的情况下，CSS比JS更适合处理这些场景:

const employees = [{
email: "[e-mail]",
img: "👮"
}, {
email: "[e-mail]",
img: "👷"
}, {
email: "[e-mail]",
img: "💂"
}, {
email: "[e-mail]",
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>