Problema Jquery

[manumar]

Hola, bueno..soy novato en javascript y más con Jquery.
El problema es que le meto un script para mostrar el contenido de una caja al hjacer click, pero esta caja son muchas, ya que está en un while que saca datos de la base de datos, y bien, el Jquery solo afecta a la primera caja,primera caja generada por el while.

Creo que el tema seria poner el script q pongo en el head al final...pero debe de haber otra forma tambien no?

salu2

[manumar]

Hola, solucioné algo el problema, ya q defini el div con su id y claro, los ids son unicos y el jquery solo lee el primero.
Pero ahora bien, hago click y TODOS se expanden o abren.

No se si me entienden. la accion tiene q recaer sobre su propio contenido, y no en el de todos.
como?

[manumar]

Pues nada, me pondré a intentarlo con mootools xD

xao

[venkman]

Deberías poner el código para que veamos qué es lo que estás haciendo. Si no, no es fácil decir dónde está el problema.

[manumar]

Vale, disculpen, aqui se los dejo:
script en head:

Código PHP:

  <script type="text/javascript">  
 $(document).ready(function() {
   $(".Bentrada").click(function() {
     $(".Ccontenido:visible").slideUp("slow");
     $(".Ccontenido:hidden").slideDown("slow");
   });
 });
</script> 
  

trozo del body:

Código PHP:

  <? 
while ($Dentradas=mysql_fetch_array($Centradas)) {
echo '<tr class="Bentrada"><th>Titulo: ',$Dentradas['Titulo'],'</th><th id="fentrada">',$Dentradas['Fecha'][0],'',$Dentradas['Fecha'][1],':',$Dentradas['Fecha'][2],'',$Dentradas['Fecha'][3],':',$Dentradas['Fecha'][4],'',$Dentradas['Fecha'][5],'(',$Dentradas['Fecha'][6],'',$Dentradas['Fecha'][7],'/',$Dentradas['Fecha'][8],'',$Dentradas['Fecha'][9],'/',$Dentradas['Fecha'][10],'',$Dentradas['Fecha'][11],'',$Dentradas['Fecha'][12],'',$Dentradas['Fecha'][13],')</th></tr>
<tr><th colspan="2"><div class="Ccontenido">',filtros($Dentradas['Contenido']),'</div></th></tr>
<tr height="10"></tr>';
}
mysql_free_result($Centradas);
?>   

Leo veo su logica a lo que pasa, pero nose como hacer para que al clickear en un titulo especifico se expanda y contraiga su contenido especifico...seria añadir una variable, pero nose muy bien como porque de javascript se bien poco xD

salu2

[venkman]

Veamos, si lo he entendido bien, tenemos varios elementos <tr class="Bentrada"> y dentro de cada uno de ellos hay un <div class="contenido">. Y quieres que cuando se haga click en el <tr> se cierre el <div class="contenido"> que esté abierto y se abra el <div class="contenido"> que está dentro de este <tr>.

¿Es eso?

Si es eso lo que quieres, puedes hacer:

Código javascript:

$(document).ready(function() {
   $(".Bentrada").click(function() {
     $(".Ccontenido:visible").slideUp("slow");
     $(".Ccontenido:hidden",$(this)).slideDown("slow");
   });
 });
 

Si eso no funciona como esperas, explícalo mejor.

[manumar]

Hola, gracias por responder.
He probado tu codigo y no funciona, es que creo que no me entendiste bien.
Veamos:

Código PHP:

 <TABLE id="entradas">
<? 
while ($Dentradas=mysql_fetch_array($Centradas)) {
echo '<tr class="Bentrada"><th>Titulo: ',$Dentradas['Titulo'],'</th><th id="fentrada">',$Dentradas['Fecha'][0],'',$Dentradas['Fecha'][1],':',$Dentradas['Fecha'][2],'',$Dentradas['Fecha'][3],':',$Dentradas['Fecha'][4],'',$Dentradas['Fecha'][5],'(',$Dentradas['Fecha'][6],'',$Dentradas['Fecha'][7],'/',$Dentradas['Fecha'][8],'',$Dentradas['Fecha'][9],'/',$Dentradas['Fecha'][10],'',$Dentradas['Fecha'][11],'',$Dentradas['Fecha'][12],'',$Dentradas['Fecha'][13],')</th></tr>
<tr><th colspan="2"><div class="Ccontenido">',filtros($Dentradas['Contenido']),'</div></th></tr>
<tr height="10"></tr>';
}
mysql_free_result($Centradas);
?>
</TABLE>  

Queda algo asi:


Se supone que la tr 2ª donde sale el contenido del mensajes está comprimida, y que cuando se hace click en un titulo se abre el contenido de ese mensaje, no el de todos, que es lo que pasa ahora.

[venkman]

Ooohm, perdona, que no había visto que se trataba de 2 <tr> distintos. No lo miré bien y creí que sólo había 1.

En ese caso... Mmm... sería algo como...

Código javascript:

$(document).ready(function() {
    $(".Bentrada").click(function() {
        $(".Ccontenido:visible").slideUp("slow");
        $(this).next("tr").find(".Ccontenido:hidden").slideDown("slow");
    });
});
 

Nota: Confirma que se deben cerrar los demás, que esa parte del funcionamiento no me la has aclarado.

[manumar]

Oh, muchisimas gracias, funciona a la perfeccion, tal como lo queria, muchas gracias :D

Segun leo, con el $(this).next("tr") consigues que se refiera primero, a la tr del click, con el next tr va a la siguiente, que es la que queremos, y luego con .find busca el id y efectua la accion :D

La verdad es que se muy poquito de jquery y gracias a eso he aprendio muchas cosas que voy a usar :P

De verdad gracias

[venkman]

Exacto!

Te recomiendo tener siemrpe a mano la documentación de jQuery. Además de la oficial, tienes esta página que resulta muy cómoda para tenerla de consulta. (Aunque no está actualizada a jQuery 1.3, sigue siendo bastante útil como referencia)

[manumar]

Oh, muchas gracias venkman, la verdad es que veo más util la web no oficial esa que pasaste, al menos para lo que yo quiero darle uso, que la oficial, porque vienen muchas cosas visuales, que es para lo que yo quiero mayoritariamente jquery.

weno, saludos y gracias, te daré karma jajaja xD

[manumar]

Holas, jeje xD aqui vengo con otra duda :P

Resulta que en otra parte de mi web lo que tengo es lo siguiente:
<tr> donde se hace click para expandir y contraer</tr>
<tr>que se contrae y expande</tr>
<tr>otra mas que se contrae y expande</tr>

El tema está en el next, que nose como decir que pille las 2 siguientes en vez de una, o algo asi

Gracias

[venkman]

Suponiendo que tienes otro div con class="Ccontenido" dentro del tercer <tr> como tenías dentro del segundo tr, entonces podrías hacer:

Código javascript:

$(document).ready(function() {
    $(".Bentrada").click(function() {
        $(".Ccontenido:visible").slideUp("slow");
        $(this).next("tr").add($(this).next("tr").next("tr")).find(".Ccontenido:hidden").slideDown("slow");
    });
});
 

Lo que hace es añadir (add) el siguiente del siguiente (.next("tr").next("tr")) y luego aplicarles el efecto a ambos.

[manumar]

Sip, era justo así :)
Muchas gracias venkman sin ti no sabria que hacer porque en la web de jquery los tutos nose, no encuentro exactamente lo que busco, tb es porque al javascript no le dedico casi nada xD pero vaya.
El codigo, era como yo pensaba, en plan poniendo dos next y algo asi, pero me faltaba el .add aunque mira, tambien se podria hacer en 2 lineas no? es decir le dices que la next tr se expanda y en otra linea le dices q la next next tb se expanda =)..pero bueno, mejor ahorrar letras y aprender funciones nuevas :D

Gracias por todo, y que dios te lo pague!!! xDDDDD

salu2

[manumar]

Hola, bueno, me va todo perfecto, pero ahora hay un problemilla que nose como solucionar, tal vez googleando se saque facil pero bueno, lo pongo aqui xD

Cuando el slideUp o slideDown o Toggle se activan, al menos en mi script si la pagina está mas abajo, pues se sube solo arriba, que se hace como un scroll instantaneo hasta el top.

Gracias y salu2

[venkman]

Habrá que ver tu script, no? :) Si tienes algo distinto o algo más de lo que hemos puesto aquí...

[manumar]

Ok, lo pongo:
PD: Se sube arriba en mozilla e IE, en Opera no me pasa =)

Pongo el script:

Código PHP:

  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript">  
$(document).ready(function() {
   $(".Bentrada").click(function() {
     $(".Ccontenido:visible").slideUp("slow");
     $(this).next("tr").find(".Ccontenido:hidden").slideDown("slow");
   });
 });
</script> 
  

y en el body:

Código PHP:

  while ($Dentradas=mysql_fetch_array($Centradas)) {
echo '<tr class="Bentrada"><th><a href="#">Titulo: ',$Dentradas['Titulo'],'</a></th><th style="width: 1px; font-size: 9px;">',$Dentradas['Fecha'][0],'',$Dentradas['Fecha'][1],':',$Dentradas['Fecha'][2],'',$Dentradas['Fecha'][3],':',$Dentradas['Fecha'][4],'',$Dentradas['Fecha'][5],'(',$Dentradas['Fecha'][6],'',$Dentradas['Fecha'][7],'/',$Dentradas['Fecha'][8],'',$Dentradas['Fecha'][9],'/',$Dentradas['Fecha'][10],'',$Dentradas['Fecha'][11],'',$Dentradas['Fecha'][12],'',$Dentradas['Fecha'][13],')</th></tr>
<tr><td colspan="2"><div class="Ccontenido">',filtros($Dentradas['Contenido']),'</div></td></tr>
<tr height="10"></tr>';
}
mysql_free_result($Centradas); 
   

Este script es uno de los que tengo, es el mas sencillo, pero igual me ocurre este fallo =(
Acepto criticas aparte del jquery xD

Gracias

[venkman]

Se sube arriba por esto: <a href="#"> que antes no estaba :)

No sé muy bien por qué necesitas el <a> si estás usando el click del <tr>.

[manumar]

Ahh. pues si, vaya vaya jeje, gran error mio, muchas gracias.
Pero entonces como podia hacer para que al pasar el raton por encima de lo que seria el texto al que le puse el vinculo...saliese como tal?

Gracias y saludos

[venkman]

Bueno, eso es más un tema de estilo. Le puedes poner en el estilo la propiedad cursor: pointer

[manumar]

Anda, pues va de maravilla, muchisimas gracias, la verdad es que esa propiedad que no conocia me va ha venir muy bien :)

Gracias y salu2