使用 forEach 函数添加多个工具提示不起作用
所以我知道一个解决这个问题的方法，但是为了了解更多关于 JavaScript 功能的信息，我会在这里展示它，所以也许有人可以向我解释为什么这不起作用。
<li>
<a href="#" class="kooltip" data-message="Početna">
<i class="fas fa-home nav__link" ></i>
</a>
</li>
<li>
<a href="#" class="kooltip" data-message="O nama" >
<i class="fas fa-address-card nav__link" ></i>
</a>
</li>
<li>
<a href="#" class="kooltip" data-message="Usluge">
<i class="fas fa-notes-medical nav__link" ></i>
</a>
</li>
<li>
<a href="#" class="kooltip" data-message="Kontakt" >
<i class="fas fa-mail-bulk nav__link" ></i>
</a>
</li>
class Tooltip {
constructor(element){
this.element = element
this.message= element.getAttribute("data-message")
}
init() {
const tip = document.createElement("div")
tip.classList.add("tip")
tip.textContent = this.message
this.element.appendChild(tip)
this.element.addEventListener("mouseenter", () => {
tip.classList.add("active")
})
this.element.addEventListener("mouseleave", () => {
tip.classList.remove("active")
})
}
}
const addTooltips = () => {
const kooltip = document.querySelectorAll(".kooltip")
kooltip.forEach(tip => {
new Tooltip(tip)
tip.init()
})
}
addTooltips()
我想为 html 中的每个 a 标签添加工具提示，但由于某种原因，这不起作用，我没有错误消息来获取有关原因的信息。
德玛西亚991回答
-
慕勒3428872
您的问题在 内addTooltips，这是一个改进版本：const addTooltips = () => { const kooltips = document.querySelectorAll('a.kooltip') kooltips.forEach(kooltip => { const tip = new Tooltip(kooltip) tip.init() })}addTooltips()这是一个工作示例：class Tooltip { constructor(element){ this.element = element this.message= element.getAttribute("data-message") } init() { const tip = document.createElement("div") tip.classList.add("tip") tip.textContent = this.message this.element.appendChild(tip) this.element.addEventListener("mouseenter", () => { tip.classList.add("active") }) this.element.addEventListener("mouseleave", () => { tip.classList.remove("active") }) }}const addTooltips = () => { const kooltips = document.querySelectorAll('a.kooltip') kooltips.forEach(kt => { const tip = new Tooltip(kt) tip.init() })}addTooltips()<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body> <li> <a href="#" class="kooltip" data-message="Početna"> <i class="fas fa-home nav__link" ></i> </a> </li> <li> <a href="#" class="kooltip" data-message="O nama" > <i class="fas fa-address-card nav__link" ></i> </a> </li> <li> <a href="#" class="kooltip" data-message="Usluge"> <i class="fas fa-notes-medical nav__link" ></i> </a> </li> <li> <a href="#" class="kooltip" data-message="Kontakt" > <i class="fas fa-mail-bulk nav__link" ></i> </a> </li></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript