Cómo podría reducir este código javascript a menos líneas de código se me ocurre un condicional pero aun no tengo mucha experiencia. Tengo 4 acciones que realizan lo mismo pero llaman a distintos id
//funcion mostrar contenido del mapa
//obtengo el id del primer div y le asigno una variable
var sobremi = document.querySelector(".hotspot-item:nth-child(1)");
//obtengo el id del segundo div y le asigno una variable
var afectado = document.getElementById("afectado");
//detecto el elemento sobre mi cuando se pone el puntero del raton
sobremi.addEventListener("mouseover", () => {
/*al momento de posicionarme sobre el primer elemento se le agrega la clase
afectado al segundo elemento */
afectado.className = "afectado";
}, false)
sobremi.addEventListener("mouseout", () => {
//cuando quito el mouse se le quita la clase al segundo elemento
afectado.className = "";
}, false)
//parrafo2
var sobremi2 = document.querySelector(".hotspot-item:nth-child(2)");
var afectado2 = document.getElementById("afectado2");
//detecto el elmento sobre mi cuando se pone el puntero del raton
sobremi2.addEventListener("mouseover", () => {
/*al momento de posicionarme sobre el primer elemento se le agrega la clase
afectado al segundo elemento */
afectado2.className = "afectado2";
}, false)
sobremi2.addEventListener("mouseout", () => {
//cuando quito el mouse se le quita la clase al segundo elemento
afectado2.className = "";
}, false)
//parrafo3
var sobremi3 = document.querySelector(".hotspot-item:nth-child(3)");
var afectado3 = document.getElementById("afectado3");
//detecto el elmento sobre mi cuando se pone el puntero del raton
sobremi3.addEventListener("mouseover", () => {
/*al momento de posicionarme sobre el primer elemento se le agrega la clase
afectado al segundo elemento */
afectado3.className = "afectado3";
}, false)
sobremi3.addEventListener("mouseout", () => {
//cuando quito el mouse se le quita la clase al segundo elemento
afectado3.className = "";
}, false)
//parrafo4
var sobremi4= document.querySelector(".hotspot-item:nth-child(4)");
var afectado4= document.getElementById("afectado4");
//detecto el elmento sobre mi cuando se pone el puntero del raton
sobremi4.addEventListener("mouseover", () => {
/*al momento de posicionarme sobre el primer elemento se le agrega la clase
afectado al segundo elemento */
afectado4.className = "afectado4";
}, false)
sobremi4.addEventListener("mouseout", () => {
//cuando quito el mouse se le quita la clase al segundo elemento
afectado4.className = "";
}, false)
//estoy usando un plugin para generar fotos interactivas, la foto que estoy utilizando es un mapa con ubicaciones, el objetivo es que al posicionarme sobre una ubicación se muestre un parrafo al costado con información de esa ubicación. //para los parrafos, le digo al navegador que no la represente con display:none;
//este es mi codigo HTMl de los parrafos, 1,2,3,4, etc
<p id="afectado2"> <span>Lorem Ipsum 2 </span><br>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Repellendus perferendis, inventore soluta ex distinctio
voluptatibus dolor corrupti temporibus? Quae quisquam sapiente
repellendus! Debitis error fuga cum dolorum perferendis sequi
rerum!
Nihil molestias ab reiciendis hic consequuntur tempora consectetur
asperiores expedita delectus culpa animi doloremque molestiae vitae
modi unde, deleniti tenetur non commodi voluptas. Quae tempore
aperiam expedita pariatur ad nostrum?
</p>
//css para ocultar el parrafo
p{
color: black;
display: none;
}
//clases para mostrar los parrafos con js
.afectado{
display: block;
color: rgb(2, 2, 2);
}
.afectado2 {
display: block;
color: rgb(2, 2, 2);
}
.afectado3 {
display: block;
color: rgb(2, 2, 2);
}
.afectado4 {
display: block;
color: rgb(2, 2, 2);
}
**para detectar el elemento del mapa estoy usando una clase que esta en un div de cada elemento ".hotspot-item" a la cual detecto sus elementos hijos hotspot-item:nth-child(1) **