Question

0

150

Visualizações

Javascript optimisation Event Listener for multiple time the same effect

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)

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

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-06-28T09:58:58.035Z

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');
    });
});

0

150

Javascript optimisation Event Listener for multiple time the same effect

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT