Могу ли я взять класс элемента onmouseover и использовать его в переменной?

Question

У меня есть симуляция музыкального инструмента. Он создан с помощью таблицы. В настоящее время, если я наведу указатель мыши на class = "ENat", показанный ниже (это будет примечание E), он выделит все классы "ENat" (примечания E) на странице. Идеально!

Но что я хочу, так это передать класс, над которым я наведен, переменной 'elms', чтобы он работал со всеми разными классами (заметками), которые я создал, без избыточности с кодом. Поэтому, если я наведу курсор на класс нот «А», все ноты «А» изменятся, и т. Д. c. Первый пост, так что простите меня, если я был недостаточно ясен.

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

Я не уверен, что понял ваш вопрос. Вы хотите, чтобы каждая заметка была выделена, если вы разделяете вашу заметку при наведении, не так ли? этот класс.

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>

Answer 3

Вы можете использовать:

window.onmouseover=function(e) {
    var elms = document.getElementsByClassName(e.target.className);
    // Change colors
};

Это должно получить имя класса элемента, над которым вы наводите курсор, которое затем можно использовать для выделения всех элементов с этим именем класса.