0

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) **

1 respuesta 1

1

Para el párrafo 2, 3 y 4 puedes hacer un ciclo:

for(let i=2; i<=4; i++) {
    var sobremi = document.querySelector(`.hotspot-item:nth-child(${i})`);
    var afectado = document.getElementById(`afectado${i}`);
    //detecto el elmento 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${i}`;
    }, false)
    sobremi.addEventListener("mouseout", () => {
       //cuando quito el mouse se le quita la clase al segundo elemento  
       afectado.className = "";
    }, false)
}

Si quieres incluir el primero en el ciclo sería algo como:

for(let i=1; i<=4; i++) {
    var sobremi = document.querySelector(`.hotspot-item:nth-child(${i})`);
    var afectado = document.getElementById(i===1 ? "reserva-nacional" : `afectado${i}`);
    //detecto el elmento 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 = i === 1 ? "afectado" : `afectado${i}`;
    }, false)
    sobremi.addEventListener("mouseout", () => {
        //cuando quito el mouse se le quita la clase al segundo elemento  
        afectado.className = "";
    }, false)
}

ACTUALIZACIÓN

Basado en tus nuevos datos, no necesitas tener una clase distinta para cada elemento, si lo que quieres es mostrar, puedes crear una única clase que se llame visible (o el nombre que le quieras poner), y esa se la aplicas al parrafo que quieras mostrar.

Te dejo aqui un ejemplo de lo que quieres hacer (funcionando):

for(let i=1; i<=4; i++) {
    let sobremi = document.querySelector(`.hotspot-item:nth-child(${i})`);
    let afectado = document.getElementById(i===1 ? "afectado" : `afectado${i}`);
    //detecto el elmento 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 = "visible";
    }, false)
    sobremi.addEventListener("mouseout", () => {
        //cuando quito el mouse se le quita la clase al segundo elemento  
        afectado.className = "";
    }, false)
}
.hotspot-item {
  margin: 10px;
  width: 40px;
  height: 40px;
  display: inline-block;
}

.hotspot-item:nth-child(1){
  background: red;
}
.hotspot-item:nth-child(2){
  background: lightblue;
}
.hotspot-item:nth-child(3){
  background: green;
}
.hotspot-item:nth-child(4){
  background: orange;
}

/* oculta todos los parrafos */
p{
  color: black;
  display: none;
}

/* Muestra solo aquel que tenga la clase "visible" */
.visible {
  display: block;
}
<div class="hotspot-item">
      
</div>
<div class="hotspot-item">
      
</div>
<div class="hotspot-item">
      
</div>
<div class="hotspot-item">
      
</div>

<p id="afectado">
   descripcion del elemento 1
</p>

<p id="afectado2">
   descripcion del elemento 2
</p>
<p id="afectado3">
   descripcion del elemento 3
</p>
<p id="afectado4">
   descripcion del elemento 4
</p>

Saludos

5
  • Hola, me da un error falta cerra la llave del for }, la agregue al final, esta bien? al momento de visualizar los cambios, todos los puntos me muestran el mismo valor, el valor 4 Commented el 17 feb. 2022 a las 12:18
  • Gracias, ya agregué la llave a la respuesta. Pero de que puntos me hablas? y de que valores me hablas? En tu código yo solo veo unos elementos del html a los que les asignas una clase (o se las quitas) según se ponga el mouse encima... no se a que puntos te refieras, ni tampoco se de cual valor 4 te refieras, si me aclaras un poco te puedo seguir ayudando. O es que falta algo mas de código en tu pregunta?
    – Pipe
    Commented el 17 feb. 2022 a las 13:13
  • Disculpa, lo voy a modificar. Commented el 17 feb. 2022 a las 13:33
  • Acabo de actualizar mi respuesta con un ejemplo funcionando, saludos
    – Pipe
    Commented el 17 feb. 2022 a las 19:09
  • Gracias lo implementaré, te cuento Commented el 17 feb. 2022 a las 19:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.