Javascript 在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()

类工具提示{
构造函数（元素）{
this.element=元素
this.message=element.getAttribute（“数据消息”）
}
init（）{
const tip=document.createElement（“div”）
tip.classList.add（“tip”）
tip.textContent=this.message
this.element.appendChild（提示）
this.element.addEventListener（“mouseenter”，（）=>{
tip.classList.add（“活动”）
})
this.element.addEventListener（“mouseleave”，（）=>{
提示.类列表.删除（“活动”）
})
}
}
常量添加工具提示=（）=>{
const kootip=document.queryselectoral（“.kootip”）
kooltip.forEach（提示=>{
新工具提示（提示）
tip.init（）
}) 
}
添加工具提示（）

---

我想为html中的每个a标记添加工具提示，但由于某些原因，这不起作用，并且我没有错误消息来获取有关为什么不起作用的信息。

您的问题在

addTooltips

中，这里有一个改进的版本：

const addTooltips=（）=>{
const kooltips=document.querySelectorAll（'a.kooltip'）
forEach（kooltip=>{
常量提示=新工具提示（kooltip）
tip.init（）
})
}
添加工具提示（）

下面是一个工作示例：

类工具提示{
构造函数（元素）{
this.element=元素
this.message=element.getAttribute（“数据消息”）
}
init（）{
const tip=document.createElement（“div”）
tip.classList.add（“tip”）
tip.textContent=this.message
this.element.appendChild（提示）
this.element.addEventListener（“mouseenter”，（）=>{
tip.classList.add（“活动”）
})
this.element.addEventListener（“mouseleave”，（）=>{
提示.类列表.删除（“活动”）
})
}
}
常量添加工具提示=（）=>{
const kooltips=document.querySelectorAll（'a.kooltip'）
kooltips.forEach（kt=>{
常量提示=新工具提示（kt）
tip.init（）
})
}
添加工具提示（）

JS-Bin

何时调用

addTooltips（）

？如果是在元素存在之前（例如在窗口onload事件之前）

queryselectoral（“.kooltip”）

将返回一个空列表，因为它们不存在，所以返回NodeList。我还忘了在addTooltips函数中添加“tip.init（）”，但即使这样，它也不起作用。但它是返回一个已填充的节点列表还是一个空节点列表？。很可能是因为你叫它太早了，所以它没有被填满。它里面有东西。好吧，那么到底是什么东西不起作用呢？提示

是否未添加到

元素中，或者

活动类是否未添加/删除到tipThank you中。它工作起来很有魅力。您能告诉我什么时候查询类名前面有标记名的元素吗？在本例中，您为什么要这样做？看起来它将以两种方式工作，使用
.kootip
和
a.kootip
。当我查看他们使用的
元素.className
的
MDN
文档时，我想应该更明确一些。MDN文档说“字符串必须是一个有效的CSS选择器字符串”，所以您最初使用的方法也很好。最终，问题似乎在于调用
tip.init（）
，但由于
tip
（实际的DOM元素）没有
init
方法（您的类有），所以它什么也没做。