Pequeña duda jQuery e identificador

Tunnecino #1 Sep '11

Hola!

Seré breve... Tengo este pequeño script con jQuery:

$("div.cmmdiv").hover(function() {
		$(".editar").css('color', 'red');
	},
	function() {
		$(".editar").css('color', 'green');
	});

Quiero que, en una lista de comentarios, al hacer hover en uno de los div's, cambiar el display a visible en la capa .editar. Pero no consigo hacerlo SOLAMENTE para el .editar de dentro del div.cmmdiv.

A ver si me explico:

Tengo 5 capas div.cmmdiv con una capa div.editar cada una.
Quiero que al hacer mouse hover en alguna de esas capas div.cmmdiv cambie el css de la capa que está dentro, no en todas las .editar.

Espero haberme explicado bien y que me podáis ayudar. Si... soy muy manco en jQuery y Javascript en general xD

Beavis #2 Sep '11

prueba cambiando $(".editar").css('color', 'xxx'); por $(this).find(".editar").css('color', 'xxx');

Tunnecino #3 Sep '11

Gracias por responder.

No, con $(this).find("div.editar").css('color', 'green'); me sigue cambiado el color a todos los div.editar. No hay alguna forma, tal y como se puede por ej de:

$("div.contenedor div.contenido")

En vez de usar div.contenedor, hacerlo mediante $(this...)?

Edit:

He estado viendo http://api.jquery.com/children/, en teoría con:

$("div.cmmdiv").hover(function() {
		$(this).children("div.editar").css('color', 'red');
	},
	function() {
		$(this).children("div.editar").css('color', 'green');
	});

Debería de ir, pero ahí directamente no me cambia ningún .editar

PiradoIV #4 Sep '11 Brongster

Pásanos la estructura del HTML, que si no damos palos de ciego =)

scumah #5 Sep '11

Es que el hover lo tienes que bindear al selector .editar, no al .cmmdiv. Algo así:

$(document).ready(function() {
	$(".editar").hover(function() {
	        $(this).css('color', 'red');
	},
	function() {
	        $(this).css('color', 'green');
	});
});

Si no, estás diciendo que al hacer hover en el div.cmmdiv, te busque los .editar que hay dentro y les cambie el css, pero a todos. No se puede hacer bindeando el hover al contenedor. Claro, todo esto sin saber la estructura de tu HTML

De todas formas, eso precisamente deberías hacerlo con css:

.editar { color: green; }
.editar:hover { color: red; }

Aunque a lo mejor estás simplemente bicheando con jquery

spoiler

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<!-- Descomenta el estilo y comenta el script, el resultado es el mismo -->
<!-- <style>
.editar { color: green; }
.editar:hover { color: red; }
</style> -->

<script type="text/javascript">
$(document).ready(function() {
	$(".editar").hover(function() {
	        $(this).css('color', 'red');
	},
	function() {
	        $(this).css('color', 'green');
	});
});
</script>

</head>
<body>

<div class="cmmdiv">
	<div class="editar">
		Hola
	</div>
	<div class="editar">
		Qué tal
	</div>
	<div class="editar">
		Cómo estás
	</div>
</div>

</body></html>

Tunnecino #6 Sep '11

Es que la finalidad "final", valga la redundancia, es usar la propiedad display, algo como lo que hay aquí en MV con los flags y los +1:

<div class="cmmdiv">
{% for cmmdata in comentariosdata %}                   		
<div class="comentario">
    <div class="avcmm">
        <span><a href="{{ urlWeb }}u/{{ cmmdata.autor.name }}/">{{ cmmdata.autor.name }}</a></span>
        <img src="{{ urlWeb }}img/avatars/RaYa.gif" alt="" />
    </div>
    <div class="cmmm">
        <div class="data fleft"><strong>#{{ cmmdata.idp }}</strong> <span>{{ cmmdata.fecha }}</span></div>
        {% if CheckLogin == 1 %}
        	{% if userdata.id == cmmdata.autor.id %}
        <div class="data fright editar"><strong>Editar</strong></div>
        	{% endif %}
        {% endif %}
        <div style="clear: both;"></div>

    <div class="text">
        {% autoescape false %}
        {{ cmmdata.mensaje }}
        {% endautoescape %}
    </div>
</div>
</div>

<div style="clear: both;"></div>

<div class="spacerx15"></div>
<div class="spacerx15 fline"></div>
<div class="spacer"></div>
{% endfor %}
</div>

1 respuesta

scumah #7 Sep '11

#6 Entonces prueba:

$('.comentario').hover(function() {
                $(this).find('.editar').toggle();
        },
        function() {
                $(this).find('.editar').toggle();
        });

Y en el css:

.editar { display: none; }

Tunnecino #8 Sep '11

Que va... sigue sin ir :S

No se, no hay alguna otra forma de hacerlo? Me temo que tendré que mostrar siempre el div editar por lo visto xD

1 respuesta

scumah #9 Sep '11

#8, Pues debe ir, al menos a mí me va, no sé donde estará el fallo Te paso este código, que funciona y tiene exactamente la misma estructura que se te forma en tu web (ábrelo directamente como html en el explorador), y prueba a ver:

spoiler

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

<style>
	.editar { display: none; }
</style>

<script type="text/javascript">
	$(document).ready(function() {
	        $('.comentario').hover(function() {
	                $(this).find('.editar').toggle();
	        },
	        function() {
	                $(this).find('.editar').toggle();
	        });
	});
</script>

</head>
<body>

<div class="cmmdiv">
	<div class="comentario">
	    <div class="avcmm">
	        <span><a href="#">Nombre</a></span>
	        <img src="{{ urlWeb }}img/avatars/RaYa.gif" alt="" />
	    </div>
	    <div class="cmmm">
	        <div class="data fleft"><strong>blah</strong> <span>Fecha</span></div>

	        <div class="data fright editar"><strong>Editar</strong></div>

	        <div style="clear: both;"></div>

	        <div class="text">
	            hola amigos, esto es un comentario
	        </div>
	    </div>
	</div>
</div>

</body>
</html>

Ojo, si vas a usar esto de arriba, tienes que cambiar el src del primer script de la página, que me lo cortan por ser muy largo, por este link para que cargue el jquery correctamente.

Tunnecino #10 Sep '11

Si, si funcionar así funciona, el problema es que hay varios bloques como ese, y se activa en toodos los .editar

scumah #11 Sep '11

No puede ser xD Prueba este, es lo mismo pero le he metido 3 divs.comentario en vez de uno sólo, y va bien.

<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="*Añade jQuery*"></script>

<style>
	.editar { display: none; }
</style>

<script type="text/javascript">
	$(document).ready(function() {
	        $('.comentario').hover(function() {
	                $(this).find('.editar').toggle();
	        },
	        function() {
	                $(this).find('.editar').toggle();
	        });
	});
</script>

</head>
<body>

<div class="cmmdiv">
	<div class="comentario">
	    <div class="avcmm">
	        <span><a href="#">Nombre</a></span>
	        <img src="{{ urlWeb }}img/avatars/RaYa.gif" alt="" />
	    </div>
	    <div class="cmmm">
	        <div class="data fleft"><strong>blah</strong> <span>Fecha</span></div>

	        <div class="data fright editar"><strong>Editar</strong></div>

	        <div style="clear: both;"></div>

	        <div class="text">
	            hola amigos, esto es un comentario
	        </div>
	    </div>
	</div>
	<div class="comentario">
	    <div class="avcmm">
	        <span><a href="#">Nombre</a></span>
	        <img src="{{ urlWeb }}img/avatars/RaYa.gif" alt="" />
	    </div>
	    <div class="cmmm">
	        <div class="data fleft"><strong>blah</strong> <span>Fecha</span></div>

	        <div class="data fright editar"><strong>Editar</strong></div>

	        <div style="clear: both;"></div>

	        <div class="text">
	            hola amigos, esto es un comentario
	        </div>
	    </div>
	</div>
	<div class="comentario">
	    <div class="avcmm">
	        <span><a href="#">Nombre</a></span>
	        <img src="{{ urlWeb }}img/avatars/RaYa.gif" alt="" />
	    </div>
	    <div class="cmmm">
	        <div class="data fleft"><strong>blah</strong> <span>Fecha</span></div>

	        <div class="data fright editar"><strong>Editar</strong></div>

	        <div style="clear: both;"></div>

	        <div class="text">
	            hola amigos, esto es un comentario
	        </div>
	    </div>
	</div>
</div>

</body>
</html>

Cambia el jQuery otra vez.

Tunnecino #12 Sep '11

Buaah gracias, ya funciona de perlas. Lo que no se es por que no me funcionó antes.

Pequeña duda jQuery e identificador

Usuarios habituales

Tags