15/08/2012, 10:46
|
| | | Fecha de Ingreso: marzo-2007 Ubicación: Moreno, Buenos Aires
Mensajes: 400
Antigüedad: 17 años, 9 meses Puntos: 47 | |
Respuesta: Seleccionar parrafo en un div con texto especifico Hola crea3d con gusto mira te paso a explicar.
var p = $(".d_los-libros p");
Creo esta variable y le asigno todos los parrafos que esten contenidos dentro del li con la clase de los libros (existe 1 solo), entonces el array p seria algo asi:
p[0] = equivale al '<p>opcion 1</p>'" dentro de '<li class="de_los_libros">';
p[1] = equivale al '<p>opcion 2</p>'" dentro de '<li class="de_los_libros">';
p[2] = equivale al '<p>opcion 3</p>'" dentro de '<li class="de_los_libros">';
Luego hago lo mismo pero para seleccionar los sections del html:
var s = $(".d_contenido-libro");
s[0] = equivale al '<section class="d_contenido-libro">'
s[1] = equivale al '<section class="d_contenido-libro">'
s[2] = equivale al '<section class="d_contenido-libro">'
Luego lo que hago es un bucle jquery ($.each()); con el cual recorro el primer array el de los parrafos donde p es el array e i es el indice, entonces le asigno a cada elemento del array p una funcion al hacerle click, por lo cual cada parrafo ahora ya tiene una funcion asignada al hacerle click arriba. dicha funcion es : $(s[i]).slideToggle("slow");Como el array p y el array s deben tener el mismo tamaño
(parrafo1, parrafo2, parrafo3) y (seccion1, seccion2, seccion3) puedo usar el indice que uso para recorrer p para llamar un elemento del array s por eso te decia que era tan imporante mantener el orden al a hora de crear los parrafos y las secciones, entonces $(s[i]).slideToggle("slow"); significa que a esa seccion le haga el efecto slideToggle() que no es mas que un display:block o display:none segun el estado anterior pero animado (queda mejor :P) y por ultimo todo este codigo lo meto dentro del $(document).ready() de jquery asi al cargase el arbol dom ya define la funcion para todos los parrafos.
Espero me hayas entendido je si te quedan dudas avisame Saludos! |