Question

我可以在鼠标悬停时获取元素的类并在变量中使用它吗？

2020-05-05

993

javascript class variables

我创建了一个乐器的模拟。它是使用表格创建的。目前，如果我将鼠标悬停在下面显示的 class="ENat"（这将是一个 E 音符）上，它会突出显示页面上的所有“ENat”类（E 音符）。完美！

但是，我希望它做的是将我悬停的类传递给“elms”变量，这样它就可以在我创建的所有不同类（音符）上工作，而不会重复代码。因此，如果我将鼠标悬停在“A”音符类上，所有“A”音符都会改变，等等。第一次发帖，如果我说得不够清楚，请原谅我。

var elms = document.getElementsByClassName('ENat');
var n = elms.length;
function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    }
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
        changeColor("red");
    };
    elms[i].onmouseout = function() {
        changeColor("tan");
    };
}

Answer 1

您想要委托 - 我已经按照您说的那样使用表格实现了，但是您可以在任何元素上使用这些类，例如 span 或 div:

window.addEventListener("load", () => { // on page load
  document.getElementById("container").addEventListener("mouseover", overAndOut)
  document.getElementById("container").addEventListener("mouseout", overAndOut)
});
const overAndOut = e => {
  const tgt = e.target;
  if (e.target.classList.contains("note")) {
    const className = tgt.className.match(/[A-H]Nat/); // match on note classname
    [...document.querySelectorAll("." + className)]
    .forEach(elem => elem.style.backgroundColor = e.type === "mouseover" ? "red" : "tan");
  }
};

.note {
  background-color: tan
}

<table>
  <tbody id="container">
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
    <tr>
      <td class="note ANat">A</td>
      <td class="note BNat">B</td>
      <td class="note CNat">C</td>
      <td class="note DNat">D</td>
      <td class="note ENat">E</td>
      <td class="note FNat">F</td>
      <td class="note GNat">G</td>
      <td class="note HNat">H/B</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用：

639239404

这应该获取您要悬停的元素的类名称，然后您可以使用该类别来突出显示该类别的所有元素名称。

Answer 3

我不确定我是否理解了你的问题。你想让每个共享悬停注释的注释都突出显示，对吗？

在这种情况下，只需在每个注释中鼠标悬停时调用一个函数，而不仅仅是在“ENat”注释中，在每种情况下都突出显示与该类匹配的所有内容。

for(key of document.querySelectorAll('.ANat, .BNat, .ENat')){
    key.addEventListener("mouseover", function(){changeColor(this.classList[0], "red")}, false);
    key.addEventListener("mouseout", function(){changeColor(this.classList[0], "tan")}, false);
}

function changeColor(className, color) {
  for(elem of document.querySelectorAll('div.' + className)){
     elem.style.backgroundColor = color
  }
}

div{
  display:inline-block;
  width:50px;
  height:200px;
  border:1px solid black;
  background:tan;
  cursor:pointer;
}

<div class="ENat"></div>
<div class="ENat"></div>
<div class="ANat"></div>
<div class="ANat"></div>
<div class="BNat"></div>
<div class="BNat"></div>
<div class="ENat"></div>
<div class="BNat"></div>