Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Limitar la acción de jQuery a clases de elementos

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    01 may, 09
    Mensajes
    21
    Poder de Reputación
    13

    Limitar la acción de jQuery a clases de elementos

    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.
    Código HTML:
    $(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.
    Código HTML:
    $(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
    Código HTML:
    <!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
    Última edición por joseteec; 28/11/2012 a las 21:33

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    Hola:

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

    Cuando tu escribes esto:

    Código:
    $('.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

    Código:
    $('#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:

    Código:
    $('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:

    Código HTML:
    <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>

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    01 may, 09
    Mensajes
    21
    Poder de Reputación
    13
    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-...-a-clases.html
    Aqui esta con la # para el id y lo explica con el . para el class.

    http://www.comocreartuweb.com/curso-...una-clase.html
    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.

  4. #4
    Recien Llegado! Habitante
    Fecha de Ingreso
    01 may, 09
    Mensajes
    21
    Poder de Reputación
    13
    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.

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    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.

Temas Similares

  1. jQuery a elementos dinámicos
    Por SamuraiX10 en el foro Foro General
    Respuestas: 6
    Último Mensaje: 23/11/2012, 11:45
  2. accion???
    Por Masterk en el foro Dreamweaver
    Respuestas: 1
    Último Mensaje: 18/06/2009, 14:18
  3. Limitar una página web.
    Por sabelo01 en el foro Foro General
    Respuestas: 5
    Último Mensaje: 29/11/2008, 00:21

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •