Javascript optimisation Event Listener for multiple time the same effect

user_17461511 0
Viewed 32

I want something that when I have a addEventListener('mouseover') it affect the two element next to him.

Like this:

let three = document.getElementById('three');
let six = document.getElementById('six');

intersection3_6.addEventListener("mouseover", function () {
  three.classList.add("hover");
  six.classList.add("hover");
});
intersection3_6.addEventListener("mouseout", function () {
  three.classList.remove("hover");
  six.classList.remove("hover");
});
#table {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}

#controls {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 12px 44px;
  grid-template-rows: 50px;
  pointer-events: none;
}

#intersection3_6 {
  pointer-events: all;
  background-color: red;
  grid-column-start: 2;
}


.hover {
  background-color: aqua;
}
<div id="table">
  <button id="three"><span>3</span></button>
  <button id="six"><span>6</span></button>
  <div id='controls'>
    <div class='vertical' id='intersection3_6'></div>
  </div>
</div>
It work but obviously when I have something like this with multiple intersections it's getting boring and not optimised to repeat myself everytime (we can just concentrate on the first row where the purple intersections are) enter image description here

Is there a way to say something like 'take the one on your left and the one on your right and do the thing' ?

css html javascript
1 Answers

Loop over all the elements with the same class, and use DOM navigation operations to reach the elements next to the event target.

document.querySelectorAll(".vertical").forEach(int => {
    int.addEventListener('mouseover', (e) => {
        let table = e.target.parentElement.parentElement;
        table.childElements[0].classList.add('hover');
        table.childElements[1].classList.add('hover');
    });
    int.addEventListener('mouseout', (e) => {
        let table = e.target.parentElement.parentElement;
        table.childElements[0].classList.remove('hover');
        table.childElements[1].classList.remove('hover');
    });
});
user_14918950
Related