javascript - DOM 元素鼠标悬停时显示框？ (带有可变数据)jQuery UI？

Question

简单地说，我正在创建一个脚本来运行大约 100 个不同的元素。然后，为每个元素创建一个在鼠标悬停时弹出的框。框中显示的信息对于每个元素来说都是唯一的。

我想我可以循环遍历每个元素，然后为每个元素创建 element1.onmouseover = function(){} 。

我可以像我在其他地方看到的推荐那样使用 jQuery 来做到这一点吗？我可以使用哪些工具来创建/设计独特的盒子？ (CSS 要求我将数据预先写入 HTML 部分才能正确显示？)

代码:

for (var index = 0;index < numProf;index++) {
    if (document.getElementById('MTG_INSTR$' + index) != "staff") {
        document.getElementById('MTG_INSTR$' + index).onmouseover = function(){

        }
    }
}

HTML 看起来像:

<span class="PSLONGEDITBOX" id="MTG_INSTR$0">FIRSTNAME LASTNAME</span>

所以我想创建一个在悬停时显示名称和指向某个页面的链接的框。 (例如 www.google.com/firstname_lastname)

Answer 1

不一定需要for循环，可以直接定位

every element which ID starts with [id^=] with advanced attribute selector

假设我们有<span> ID 以 MTG_INSTR$ 开头的元素 和一些数字，如

function doMyStuff() {

  // Get text content
  var text = this.textContent;
  
  // Do nothing if contains "staff" "Staff" "stAFf" etc
  if(/staff/i.test(text)) return; 
  
  var num = this.id.replace(/\D+/,""); // Get the suffix number (if you need it)
  console.log("ID SUFFIX: "+ num );
  
  var googleLink = "http://www.google.com/search?q="+ encodeURIComponent(text.trim());
  console.log(googleLink);
  // window.location = googleLink; // uncomment to navigate to page
}


Array.from( document.querySelectorAll("[id^='MTG_INSTR$']") ).forEach( el => {
  el.addEventListener("click", doMyStuff);
});

[id^="MTG_INSTR$"] {
    color:red;
    cursor: pointer;
}

Lorem ipsum <span id="MTG_INSTR$7">dolor sit amet</span>, consectetur 
adipisicing elit. <span id="MTG_INSTR$23">Fuga maxime officia</span> asperiores 
repellat cumque <span id="MTG_INSTR$31">magnam molestiae <b>Staff</b> will not 
react to click!!!!! </span>suscipit recusandae! Perferendis repudiandae iste 
maxime dolores <span id="MTG_INSTR$50">tempora nostrum</span>, atque dolorum 
<span id="MTG_INSTR$545">ipsam</span>! Pariatur, error.