所以我知道一个解决这个问题的方法，但是为了了解更多关于 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 标签添加工具提示，但由于某种原因，这不起作用，我没有错误消息来获取有关原因的信息。
1 回答
慕勒3428872
TA贡献1848条经验 获得超6个赞
您的问题在 内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>
添加回答
举报
0/150
提交
取消