Foros del Web » Programando para Internet » Javascript »

Diferenciar DIV

Estas en el tema de Diferenciar DIV en el foro de Javascript en Foros del Web. hola tengo un problema y me me gustaría a ver si alguien pudiera echarme una mano porque no doy con la solución. Estoy haciendo un ...
  #1 (permalink)  
Antiguo 11/02/2011, 12:29
 
Fecha de Ingreso: febrero-2010
Mensajes: 37
Antigüedad: 14 años, 2 meses
Puntos: 0
Diferenciar DIV

hola tengo un problema y me me gustaría a ver si alguien pudiera echarme una mano porque no doy con la solución.

Estoy haciendo un script para que muestre una porción de un texto cuando pulse sobre un enlace, más concretamente es un menú con noticias, en el cual solo muestro el título de la noticia y quiero que cuando se pulse sobre él se despliegue la descripción de la noticia.
La cosa es que cada noticia va dentro de un <div> y como tengo varias noticias tengo que tener varios <div>, pero la cosa es la siguiente: Como el div es único, solo puede estar nombrado de una única forma, es decir <div id="etiquetaUnica"...>, por lo que he aprovechado el bucle que me he creado para consultar a la base de datos y voy nombrándolos de diferente manera gracias a un contador que me he creado.
Código PHP:
Ver original
  1. while ($row=mysql_fetch_array($result)){
  2.         $capaefectos = "capaefectos".$i;
  3.         $mostrar = "mostrar".$i;
  4.         $ocultar = "ocultar".$i;
  5.        
  6.         print($row['titulo']);
  7.         print("   <a href='#' id='$mostrar'>ver</a>");
  8.         print("<div id='$capaefectos' style='background-color: #2489DB; color:#ffffff; padding:10px; display:none;'>");
  9.         print("<br>
  10.                <br>");
  11.         print($row['descripcion']);
  12.         print("   <a href='#' id='$ocultar' style='color:#000000;strength:12'>Ocultar</a>");
  13.         print("</div>
  14.                <p></p>");
  15.         $i = $i + 1;
  16.     }

El script que me he creado para que cuando se pulse en el enlace y se muestre el texto es el siguiente:
Código Javascript:
Ver original
  1. <script src="js/jquery.js" type="text/javascript"></script>
  2.  
  3. <script>
  4.  
  5.     var contador = '<?echo $contador;?>'
  6.     //document.writeln(contador)
  7.     var n = 1
  8.     $(document).ready(function(){
  9.         while(n<=contador){
  10.             ocultar = '#ocultar'+n
  11.             //document.writeln(ocultar)
  12.             mostrar = "#mostrar"+n
  13.             capaefectos = "#capaefectos"+n
  14.  
  15.             $(ocultar).click(function(event){
  16.  
  17.             event.preventDefault();
  18.  
  19.             $(capaefectos).hide("slow");
  20.  
  21.  
  22.             });
  23.  
  24.             $(mostrar).click(function(event){
  25.  
  26.             event.preventDefault();
  27.  
  28.             $(capaefectos).show(3000);
  29.  
  30.             });
  31.             n += 1
  32.  
  33.            
  34.         }
  35.     });
  36.  
  37. </script>

Me he echo un contador porque mi idea es tener tantos Ocultar y Mostrar como Noticias tenga en la base de datos para que así tuviera un <div> para cada noticia, pero la cosa es que si pongo un bucle en el script lo que consigo es que solo tenga un Ocultar y Mostrar (con el valor del número de Noticias que dispongo en la BBDD, es decir que si tengo 5 noticias ocultar sería: ocultar5,...) y no tenga cada ocultar y mostrar como noticias disponga. Es decir quisiera algo parecido a que si dispongo de dos noticias pues tuviera algo parecido a esto
Código Javascript:
Ver original
  1. $(ocultar1).click(function(event){
  2.  
  3.             event.preventDefault();
  4.  
  5.             $(capaefectos1).hide("slow");
  6.  
  7.  
  8.             });
  9.  
  10.             $(mostrar1).click(function(event){
  11.  
  12.             event.preventDefault();
  13.  
  14.             $(capaefectos1).show(3000);
  15.  
  16.             });
  17. $(ocultar2).click(function(event){
  18.  
  19.             event.preventDefault();
  20.  
  21.             $(capaefectos2).hide("slow");
  22.  
  23.  
  24.             });
  25.  
  26.             $(mostrar2).click(function(event){
  27.  
  28.             event.preventDefault();
  29.  
  30.             $(capaefectos2).show(3000);
  31.  
  32.             });

Muchas gracias y sobretodo espero a verme explicado bien

Gracias.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:08.