所以我不久前完成了一個編碼訓練營，但我對 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">[email protected]</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;
}
我試過這個解決方案使用 jQuery 將滑鼠懸停在相鄰文本上時更改圖示的顏色
我不知道是我做得不對還是什么但無法讓它發揮作用。
也可以隨意判斷我的代碼，建議越多越好:)。謝謝！
uj5u.com熱心網友回復：
假設電子郵件地址在一個陣列中，您需要做的就是生成一個新影像，并將其title屬性設定為每個陣列條目的電子郵件地址：
["[email protected]", "[email protected]", "[email protected]", "[email protected]"].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>)，因為瀏覽器的文本樣式。標題用于定義檔案結構，對于那些使用輔助技術（如螢屏閱讀器）瀏覽網頁的人來說是必不可少的。An<h5>只會用于細分現有<h4>部分。而 an<h4>只能用于細分一個<h3>部分，依此類推。
您在代碼中使用 JQuery。雖然 JQuery 本身沒有任何問題，但它被廣泛用于解決簡單的編碼場景。您在這里的情況非常簡單，并且確實不保證 JQuery。在學習 JavaScript 庫和框架之前，先好好學習 JavaScript。
uj5u.com熱心網友回復：
您可以使用 CSS 來處理懸停效果，如果可能，CSS 比 JS 更可取來處理這些場景：
const employees = [{
email: "[email protected]",
img: "??"
}, {
email: "[email protected]",
img: "??"
}, {
email: "[email protected]",
img: "??"
}, {
email: "[email protected]",
img: "??"
}]
employees.forEach(d => {
const html = ` <div >
<div >${d.img} </>
<h5 >${d.email.match(/.*(?=@)/)}</h5>
<div >??<h5 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/477467.html
標籤：javascript html css 数组 动态的
上一篇：在JUnit5中，為什么postMethod會拋出TransactionSystemException而不是回傳帶有錯誤請求的ResponseEntity？