Entrar

Limitar la acción de jQuery a clases de elementos

joseteec · · Solicitar retirada
Ya para empezar empiezo con dudas.
hasta que he llegado a esta leccion, no se si la 2 o la 3 jajaja
me ha funcionado todo bien.
Me explico en los scripts de las alertas mientras he mantenido el codigo de funciones.js de la manera siguiente.
$(document).ready(function()
    {
    $("a#enlacetipocctw").click(function(evento)
        {
        alert("Te diriges a una gran página, CCTW!");
        });
    });
ha ido todo bien la alerta sale en su momento y perfecto, pero con el siguiente codigo, funciona pero no sale la alerta, pasa directamente a la nueva web sin dar el aviso.
$(document).ready(function()
	{
		$(".enlacetipocctw").click(function(evento)
		{
		alert("Te diriges a una gran página, CCTW!");
		});
	});
observese que al hacer click en el texto iten dos si que salta el aviso, yo creo que es por el class, ya me direis
No se en que punto me he organizado el lio espero que me podais hechar una mano
os pongo el index para que podais comprobar y el enlace de donde lo tengo colgado.
Index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ejemplo jquery</title>
	<script type="text/javascript" src="mijquery.js"></script>
	<script type="text/javascript" src="funciones.js"></script>
	<link type="text/css" href="estilos.css" media="all" rel="stylesheet"/>
</head>

<body>
	<div id="contenido">
		<h1>Titular de mi web</h1>
		<p>Este es el primer parrafo de <a href="#">web</a>. Espero que me apliquen un monton de trucos estos webmaster del universo</p>
		<ul>
			<li>Primero</li>
			<li>Segundo</li>
			<li>Tercero</li>
		<ul>
			<li>Iten uno</li>
			<li class="enlacetipocctw">Iten dos</li>
		</ul>
			<li>Cuarto</li>
		</ul>
		<p>Se acabo el contenido por el momento <a id="enlacetipocctw" href="http://www.comocreartuweb.com"> Visita ComoCrearTuWeb!</a></p>
	</div>
</body>
</html>
Enlace
http://www.joseignacio.hol.es/index.html
skaparate · · Solicitar retirada
Hola:

El error es simple: tu problema es que no estas utilizando un ID en el segundo ejemplo.

Cuando tu escribes esto:

$('.algunacosa')

haces referencia a una clase, pues, al igual que en CSS, comienza por un punto. En este caso se esta refiriendo a cualquier elemento con una clase "algunacosa".

Por otro lado, si escribes

$('#algunacosa')

haces referencia a cualquier elemento con el atributo id "algunacosa". Al igual que en CSS, a los ID se les debe anteponer una almohadilla o gato (#).

Si te fijas en el ejemplo del curso, verás esto:

$('a#enlacetipocctw')

el que hace referencia, específicamente, a un enlace (el elemento HTML a) cuyo atributo ID es enlacetipocctw: <a href="http://comocreartuweb.com/" id="enlacetipocctw">CCTW</a>.

Haz la prueba, para que veas la diferencia. Añade un botón cuyo ID sea el mismo que el enlace y agrega el código del curso:

<button id="enlacetipocctw">CCTW</button>
<a href="http://comocreartuweb.com/" id="enlacetipocctw">CCTW</a>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('a#enlacetipocctw').click(function(evento) {
      alert("Se presionó en un enlace");
    });
  
    $('button#enlacetipocctw').click(function(evento) {
      alert("Se presionó un botón");
    });

    $('#enlacetipocctw').click(function(evento) {
      alert("Se presionó algún elemento con ID 'enlacetipocctw'");
    });
  });
</script>
joseteec · · Solicitar retirada
Comienzo con que no he probado el boton, ahora mismo no puedo hacerlo.
A ver mientras e tenido la almoahdilla o gato me funcionaba, recuerdo que cuando hice ccs y html, tambien con vosotros lo aprendi, el class y el id.
Bueno pero a continuación en el curso se pone el siguiente codigo, pongo los enlaces de las dos paginas donde estan y deja el punto para todos los elementos, yo me he liado o me he perdido en algun sitio, eso está claro, lo que no se muy bien es en donde, por eso pongo esto otra vez.

http://www.comocreartuweb.com/curso-gratis-de-jquery/introducion-al…
Aqui esta con la # para el id y lo explica con el . para el class.

http://www.comocreartuweb.com/curso-gratis-de-jquery/introducion-al…
Y aqui es donde me organizo el lío, evidentemente si pulsas encima de iten 2, que queda claro que ni es enlace ni es na, salta el aviso, pero si pulsas en el enlace que antes funcionaba, no.

Es aqui donde me pierdo a partir del primer parrafo que me deja de funcionar el aviso.
No se si tiene que ver con el class o con que, ya perdonareis que sea tan pesadico,
un saludo a todos y enorabuena por esta magnifica web que he aprendido un monton de cosas muy bien explicadas y con ejercicios practicos que para mi es la mejor manera de aprender.
joseteec · · Solicitar retirada
Por fin he conseguido entender, que tenia que cambiar el id por el class, ahora ya todo funciona correctamente, tras leerlo todo unas cuanntas veces me he enterado.
Gracias skaparate por tu paciencia y el boton ha sido muy aclaratorio.
un saludo y enhorabuena para CCTW por estos tutoriales.
skaparate · · Solicitar retirada
Uyyyy acabo de leer esto... pero bueno, mejor, pues lo has entendido por cuenta propia (yo le doy más valor a dicho mérito), así que Felicitaciones :).

Saludos.