Una formula para varias acciones iguales solo funciona una vez

Kevin77

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
28 Nov 2019
Mensajes
81
Hola compañeros,

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
 

davidrod

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
31 Dic 2020
Mensajes
536
Solo está haciéndolo en un elemento, tal como lo tienes en el código, necesitas iterar (foreach) tu código, para que lo haga en todos los que hagan "match" con la clase.
 

Kevin77

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
28 Nov 2019
Mensajes
81
Solo está haciéndolo en un elemento, tal como lo tienes en el código, necesitas iterar (foreach) tu código, para que lo haga en todos los que hagan "match" con la clase.
Muchas gracias compañero, investigaré un poco ya que estoy algo verde en funciones pero estoy bastante orientado a lo que dices.

Gracias, saludos.
 

YeltsinReyes

Iota
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
16 Feb 2010
Mensajes
2.193
@Kevin77 prueba pasandole el this a las funciones.
JavaScript:
 onmouseover="ocultarEspecialidad(this)" onmouseout="textoEspecialidad(this)"
 
function ocultarEspecialidad(este) {
    este.style.display = 'none';
}

function textoEspecialidad(este) {
    este.style.display = 'block';
}
 

Kevin77

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
28 Nov 2019
Mensajes
81
@Kevin77 prueba pasandole el this a las funciones.
JavaScript:
 onmouseover="ocultarEspecialidad(this)" onmouseout="textoEspecialidad(this)"

function ocultarEspecialidad(este) {
    este.style.display = 'none';
}

function textoEspecialidad(este) {
    este.style.display = 'block';
}

Gracias compañero, no funciona, sigo mirando a ver si acierto.

Muchas gracias compañero, investigaré un poco ya que estoy algo verde en funciones pero estoy bastante orientado a lo que dices.

Gracias, saludos.

Estoy mirando y creo que tengo que crear el array también para que itere con el foreach no?

He probado tambien con un if y no me ha funcionado.

Con lo sencillo que lo veía yo en mi cabeza :(

Gracias a todos compañeros.
 

Kevin77

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
28 Nov 2019
Mensajes
81
He llegado hasta aquí, el problema ahora es que me los oculta todos, no solo en el que estoy haciendo onmouseover:

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

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba