2

Perdonar que sea tan ambiguo en el título del post pero no sabía como ponerlo, os comento el problema y soy todo oídos.

Tengo una fórmula en javascript que me oculta un campo de texto con un onmouseover, y cuando se sale del objeto un onmouseout, lo tengo puesto en varios objetos de una misma página, pero solo se me ejecuta en el primer elemento, no entiendo porque en los otros no se ejecuta si en uno funciona. Esta hecho con bootstrap por si veis el html un poco raro, mi código:

<div class="row mt-4 ml-2 ml-lg-0 mt-lg-4">
 <div class="col-lg-4 mb-3 mb-lg-0 miclase">
  <a href="prueba.php">
   <div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
    <h2 class="miclase-texto">motor</h2>
   </div>
  </a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
 <a href="prueba.php">
  <div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
   <h2 class="miclase-texto">mecanica</h2>
  </div>
 </a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
 <a href="prueba.php">
   <div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
    <h2 class="miclase-texto">repuestos</h2>
   </div>
  </a>
 </div>
 </div><!--Fin row-->
</div><!--Fin row-->

Y el Javascript:

function ocultarEspecialidad() {
  let ocultarTexto = document.querySelector('."miclase-texto');
  ocultarTexto.style.display = 'none';
}

function textoEspecialidad() {
 let ocultarTexto = document.querySelector('."miclase-texto');
 ocultarTexto.style.display = 'block';
}

Ya os digo, funcionar me funciona en el primero solamente.

Gracias a todos, saludos

2 respuestas 2

2

El problema es que se usa la función

 let ocultarTexto = document.querySelector('."miclase-texto');

Con esto busca en el html una clase con ese nombre, solo una; para obtener todas tenemos la función querySelectorAll: esta devuelve una lista de los elementos que lo cumplen y solo tendríamos que iterar sobre ella.

function ocultarEspecialidad() {
  let elementList = document.querySelectorAll('."miclase-texto');
  elementList.forEach(x -> x.style.display = 'none');
}

function textoEspecialidad() {
 let elementList = document.querySelectorAll('."miclase-texto');
 elementList.forEach(x -> x.style.display = 'block');
}

Para más info: querySelectorAll

Edito, no habia entendido el funcionamiento, en ese caso, deberás utilizar un identificador y acceder a ese valor en concreto

Añadimos el identificador en el html

<div class="row mt-4 ml-2 ml-lg-0 mt-lg-4">
 <div class="col-lg-4 mb-3 mb-lg-0 miclase">
  <a href="prueba.php">
   <div class="miclase-imagen" onmouseover="ocultarEspecialidad('motor')" onmouseout="textoEspecialidad('motor')">
    <h2 id="motor" class="miclase-texto">motor</h2>
   </div>
  </a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
 <a href="prueba.php">
  <div class="miclase-imagen" onmouseover="ocultarEspecialidad('mecanica')" onmouseout="textoEspecialidad('mecanica')">
   <h2 id="mecanica" class="miclase-texto">mecanica</h2>
  </div>
 </a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
 <a href="prueba.php">
   <div class="miclase-imagen" onmouseover="ocultarEspecialidad('repuestos')" onmouseout="textoEspecialidad('repuestos')">
    <h2 id="repuestos" class="miclase-texto">repuestos</h2>
   </div>
  </a>
 </div>
 </div><!--Fin row-->
</div><!--Fin row-->

Y le decimos al js que elija el id según el parámetro de las funciones, el carácter # referencia que se trata de un id, al igual que . lo hace de una clase

function ocultarEspecialidad(name) {
  let ocultarTexto = document.querySelector('#'+name);
  ocultarTexto.style.display = 'none';
}

function textoEspecialidad(name) {
 let ocultarTexto = document.querySelector('#'+name);
 ocultarTexto.style.display = 'block';
}
0
1

Muchas gracias, la fórmula no me funcionaba pero con la referencia que me diste he consultado y he hecho la "alternativa larga",

Adjunto código que me ha funcionado por si a alguien la sirve:

function ocultarEspecialidad() {
  let ocultarTexto = document.querySelectorAll('.miclase-texto');

   ocultarTexto.forEach(function(e){
     e.style.display = "none";
   });
 }

function textoEspecialidad() {
 let insertarTexto = document.querySelectorAll('.miclase-texto');

  insertarTexto.forEach(function(e){
   e.style.display = "block";
 });
}

Muchas gracias compañero, saludos

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.