Empezando con jquery

kraneok #1 Ago '12 Penitente

Hola gente, estoy comenzando a darle a jQuery como el posterior aprendizaje después de javascript, la cuestión es que estoy haciendo cosillas y quiero que me ayudéis si es posible.

Tengo un código que no se exactamente si funciona o no, por la inexperiencia, os lo pego:

en el index.php

$('document').ready(function(){$('#menu').changeColor();});

En el .js

(function($)
{
	$.fn.changeColor = function()
	{
		return this.each(function(){
		var menu = $(this);
		menu.find('#boton > a').bind('mouseenter', function()
		{
			alert("entrado");
		})
		
	
	})
	
}
})(jQuery);

Lo que quiero es hacer un simple hover, pero con jQuery, para ir viendo la funcionalidad, que fallos tengo ahí?

SicKneSs #2 Ago '12

en plan rápido sin pensar muxo yo lo haría capturando e evento hover en #menu

$('document').ready(function(){$('#menu').hover(function() {
    // codigo cuando el raton pasa encima, por ej. tu plugin changecolor()
},
    // codigo cuando el ratón 'sale'
});

});

1 respuesta

kraneok #3 Ago '12 Penitente

#2 Bien, gracias, algo así quería xd.

kraneok #4 Ago '12 Penitente

Hola, vengo con otra dudita.

$('document').ready(function(){
	

//Botón que desplega el menu
$('#bdesple').click(function(event){
	event.preventDefault();
	('#menu').show(3000);
})

})

El debugger me ha lanzado esto:
Uncaught TypeError: Object #menu has no method 'show'
Qué estoy haciendo mal?

Vale xdd, ay he visto el error, pero ahora, no me muestra la capa, que raro.

Vale, arreglado gracias!

liebgott #5 Ago '12

$('#menu').show(3000);

enfiiiin, no lei todo el mensaje

kraneok #6 Ago '12 Penitente

Otra duda que no consigo aclarar.

Tengo este menú.

<div id="menu">
			<ul>
				<li>
				<h2>El Olivo</h2>
					<ul>
						<li><a href="#">Presentación</a></li>
						<li><a href="#">Situación</a></li>
						<li><a href="#">Entorno</a></li>
						<li><a href="#">Contacto</a></li>
					</ul>
				</li>
				<li>
					<h2>Instalaciones</h2>
					
				<ul>
					<li><a href="#">Comedor Clásico</a></li>
					<li><a href="#">Comedor Típico</a></li>
					<li><a href="#">Terraza Averroes</a></li>
				</ul>
			</li>
			<li>
				<h2>Carta</h2>
				
				<ul>
					<li><a href="#">Ibéricos y Entrantes</a></li>
					<li><a href="#">Pescado Frito</a></li>
					<li><a href="#">Mariscos y Pescados</a></li>
					<li><a href="#">Carnes</a></li>
					<li><a href="#">Postres Caseros</a></li>
					<li><a href="#">Sugerencias</a></li>
					<li><a href="#">Menú</a></li>
				</ul>
			</li>
			<li>
				<h2>Establecintos del Grupo</h2>
				
				<ul>
					<li><a href="#">Taberna El Limonero</a></li>
					<li><a href="#">Casa Pedro</a></li>
				</ul>
			</li>
		</ul>
	</div>

Bien, y ahora tengo esta función en jQuery

$('#menu ul li > h2').click(function(){
		
	console.log('entrado');

})

Como accedo al hijo ul del h2 para mostrar las subcategorías?

Merkury #7 Ago '12

$(document).ready(function(){
	    $('h2').click(function(){
	    alert("wololo");
	    })
	})

No neceistas ahcer el acceso a través del selector en plan hardcore XD, ya sabía yo que era mucha movida, ~~lo raro que lo primero que te había puesto en jsFiddle no funciona y cuando lo he pasado a local, al toque... :S~~ (no le había puesto todas las tags de html solo lo que has pasteado tú XD)

Probado y funcionando

Edit --> Y estas dos versiones también funcionan:


    $('h2').click(function(){
    alert("wololo");
    })

	    $('li > h2').click(function(){
	    alert("wololo");
	    })

Tunnecino #8 Ago '12

Siempre puedes tb usar $('ul#menu h2'). para que no te pille todos los H2 de la pag.

2 respuestas

Merkury #9 Ago '12

#8 Eso no funciona eh porque lo de poner el elemento hijo con el padre detras y la almohadilla para indicar que es un ID es mas bien de CSS.

Yo creo que en este caso lo más practico es usar el $(li > h2) que solo cojerá aquellos que estén dentro de un elemento de una lista, con lo que los h2 de maquetación de secciones o títulos no listados, quedarán excluidos.

Lo que si es que si quieres hacer una acción diferente para cada uno es o que les pongas un ID o que utilices algún atributo con valor asociado y a través de jQuery discrimines.

1 respuesta

Tunnecino #10 Ago '12

#9 Me dirás que no funciona cuando uso en todas mis webs, al estilo:

$("span.urlcopy span").text('Copy');
$("#delete-checkurl span").html(json.data);

Así que sí, si funciona.

1 respuesta

Merkury #11 Ago '12

#10 Tal como lo has puesto en #9 no funciona, la función completa quedaría tal que así:

$('ul#menu h2').click(function(){
   alert("Wololo");
})

Y por mucho que te empeñes eso en jQuery no tiene sentido.

#12 Paso de discutir, por una tontería ademas, pero tal como lo has puesto en #8 no funciona y si no te lo crees cojes el html lo pegas, copias la función y luego pruebas.

En todo caso #12 esto si que funcionaría:

$('#menu ul h2').click(function(){
   alert("Wololo");
})

Es que ademas mira que hay formas de pasar el selector y has puesto justo la única que no funcionaría XD

1 respuesta

Tunnecino #12 Ago '12

Obviamente solo he puesto el selector que pueda usar, y lo de que no tiene sentido en jQuery te lo inventas tu por que quieres.

#11 Pero vamos a ver, alma de cántaro... como va a funcionar si yo solo he puesto el selector, y sí funciona. Acabo de probar en la consola js de chrome en unos de mis proyectos;

$('div#delete').fadeIn();

Y ha funcionado perfectamente... así que no se de donde sacas eso de que no funciona. Obviamente poner div#delete sobra, por que nunca vas a tener dos ids iguales delete, pero es igualmente válido que usar div.delete.

#11 Venga, para ti la perra gorda, si dices que no funciona, será que mi jQuery es del futuro.

2 respuestas

Merkury #13 Ago '12

#12 Colega, coge la primera función que te he puesto en #11 copia el html de #1 móntalo, pruébalo y luego me lo dices.

Que hasta lo he probado yo porque me has hecho dudar y no funciona carajo.

Empezando con jquery

Usuarios habituales

Tags