Foros del Web » Programando para Internet » Jquery »

jquery selectores de clase - simultaneidad

Estas en el tema de jquery selectores de clase - simultaneidad en el foro de Jquery en Foros del Web. Buenas a todos, les hago una consulta.. tengo un html en el que cargo algunos items similares con img y descripcion. La idea es que ...
  #1 (permalink)  
Antiguo 04/08/2011, 11:00
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 17 años, 6 meses
Puntos: 2
jquery selectores de clase - simultaneidad

Buenas a todos,
les hago una consulta..
tengo un html en el que cargo algunos items similares con img y descripcion.

La idea es que la descripcion este oculta, y al pasar sobre el div, se oculte la img mostrando la descripcion.

el html
Código:
<div id="expandir" class="grid_12">
            <div class="unidad">
                <div class="imagen"><img src="images/img_btn.png" /></div>
                <div class="info">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Donec in arcu id orci auctor fringilla cursus rutrum leo. 
                    Praesent non ante in lectus varius lobortis. 
                    In lorem lacus, dapibus ac bibendum sit amet, mollis ut odio. 
                    Maecenas quam ante, condimentum a sodales non, imperdiet at sem. 
                    Sed nec diam at felis tempor ornare non vel tellus. Aenean bibendum 
                    sem ut erat feugiat tristique faucibus leo cursus.</p>
                </div>
            </div>
            <div class="blank">&nbsp;</div>
        </div>
y la funcion

Código:
$(document).ready(function() {
	$("div.unidad").hover(function(){
		$("div.imagen").fadeOut('slow', function() {
			$("div.info").fadeIn('slow');
			$("div.imagen").css({"display": "none"});
		});
	}, function() {
			$("div.info").fadeOut('slow', function() {
			$("div.imagen").fadeIn('slow');
			$("div.info").css({"display": "none"});
		});
	});
});
el tema es que cuando duplico el item (unidad) y hago hover sobre uno, el efecto lo hace en los 4.. como puedo individualizarlos, sin poner un identificador o clase distinto a cada uno?

se agradece!!
saludos!
  #2 (permalink)  
Antiguo 05/08/2011, 06:14
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 7 meses
Puntos: 65
Respuesta: jquery selectores de clase - simultaneidad

http://www.forosdelweb.com/f127/jque...-comun-933946/
  #3 (permalink)  
Antiguo 05/08/2011, 15:29
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 17 años, 6 meses
Puntos: 2
Respuesta: jquery selectores de clase - simultaneidad

gracias por el link.. me sirvio para resolver el problema..

pero ahora tengo otro.. no puedo alcanzar ciertos divs..

la estructura seria

Código:
destacado
	imgDestacada
		operacion /operacion
	/imgDestacada
	info
    		alguna informacion
	/info
    
	descripcion (oculta)
    		alguna descripcion
	/descripcion
/destacado
Necesito ocultar "info" y mostrar "descripcion" al pasar sobre destacado, y a la vez, cambiar la imagen de fondo de imgDestacada.. Pero no consigo hacer mas que ocultar info.
Ademas al estar sobre imgDestacada u otro me toma como mouseOut de destacado..

la fc que intente es :

Código:
$(document).ready(function() {
	$('.destacado').mouseover(function(){
		$('.info', this).fadeOut('slow', function() {
			$('.imgDestacada', this).css('background', 'url(../images/placa_img_hover.png) no-repeat');
			$('.descripcion', this).fadeIn('slow');
			$('.info', this).css({"display": "none"});
			alert ("asdasd");
		});
	}).mouseout( function(){
		$('.info', this).fadeOut('slow', function() {
			$('.descripcion', this).fadeIn('slow');
			$('.info', this).css({"display": "none"});
		});
	});
});
alguna idea?
  #4 (permalink)  
Antiguo 05/08/2011, 16:05
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 7 meses
Puntos: 65
Respuesta: jquery selectores de clase - simultaneidad

fijate que cuando estás dentro del callback del fadeOut, this ya no hace referencia a .destacado

podés guardar una referencia en una variable
Código Javascript:
Ver original
  1. $('.destacado').mouseover(function(){
  2.     var destacado = this;
  3.     $('.info', this).fadeOut('slow', function() {
  4.         $('.imgDestacada', destacado).css('background', 'url(../images/placa_img_hover.png) no-repeat');
  5.         $('.descripcion', destacado).fadeIn('slow');
  6. .
  7. .
  8. .
  #5 (permalink)  
Antiguo 06/08/2011, 09:08
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 17 años, 6 meses
Puntos: 2
Respuesta: jquery selectores de clase - simultaneidad

gracias por tu ayuda nuevamente Dany_s
se me ocurrio que el problema debia venir por cuestiones de alcances, pero realmente no sabia como llegar..
voy a probar con eso y vuelvo para comentar como me ha ido..

saludos,
  #6 (permalink)  
Antiguo 06/08/2011, 10:42
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 17 años, 6 meses
Puntos: 2
Respuesta: jquery selectores de clase - simultaneidad

Al final pude arreglarlo.. con la solucion para el alcance del objeto que me aportaste, algo mejoro, pero de alguna manera seguia teniendo problema para mantener con el mouseover/mouseout al pasar de padres e hijos..
buscando encontre solucionarlo con mouseenter/mouseleave y ahora funciona perfectamente.

aca esta el link por si alguno lo desea
http://jquery-howto.blogspot.com/200...-mouseout.html

mi codigo ha quedado asi:
Código:
$(document).ready(function() {
	$('.destacado').mouseenter(function(){
		var destacado = this;
		$('.imgDestacada', destacado).css('background-image', 'url(images/placa_img_hover.png)');
		$('.info', this).fadeOut('fast', function() {
			$('.descripcion', destacado).fadeIn('fast');
		});
	}).mouseleave( function(){
		var destacado = this;
		$('.imgDestacada', destacado).css('background-image', 'url(images/placa_img.png)');
		$('.descripcion', this).fadeOut('fast', function() {
			$('.info', destacado).fadeIn('fast');
		});
	});
});
saludos y como siempre gracias por la ayuda

Etiquetas: clase, html, selectores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:37.