Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/02/2014, 13:59
DandyCC
 
Fecha de Ingreso: junio-2012
Mensajes: 147
Antigüedad: 11 años, 10 meses
Puntos: 1
Problema al querer hacer una acción sobre varios elementos

Muy buenas. Intentaré exponer el problema lo más preciso posible. Tengo una tabla en la que si el usuario pulsa sobre un enlace, se despliega cuerta información haciendo visible un tr inicialmente oculto. Esta es la estructura general:
Código HTML:
Ver original
  1.     <tbody>
  2.         <tr></tr>
  3.         <tr class="ocultable oculto"></tr>
  4.         <tr></tr>
  5.         <tr class="ocultable oculto"></tr>
  6.         <tr></tr>
  7.         <tr class="ocultable oculto"></tr>
  8.     </tbody>

La clase "ocultable" no tiene estilos asociados, la uso sólo para detectar el tr luego con jquery. La clase "oculto" simplemente tiene como estilo "display: none".

Bien, en los tr que no están ocultos se muestra cierta información y cuando el usuario pulsa sobre un enlace contenido en ese tr quiero que se haga visible el tr oculto siguiente. Y si ya estuviera visible, que se oculte. Esto es fácil y no me da problemas.

Código Javascript:
Ver original
  1. $('.nombre_alumno').click(function() {
  2.     var ref = $(this).parents("tr").next();
  3.     if (ref.hasClass("oculto")) {
  4.         ref.removeClass("oculto");
  5.     }
  6.     else {
  7.         ref.addClass("oculto");
  8.     }
  9. });

Además, tengo dos enlaces fuera de la tabla para mostrar todos los tr ocultos y para ocultarlos. Y aquí es donde viene el problema. Este es el código que uso para esto:

Código Javascript:
Ver original
  1. $('.desplegar').click(function() {
  2.     // Selecciono todos los tr
  3.     var ref = $(".central_section").find("#mostrar_trabajo_wrapper").find("tr");
  4.     // Si tienen la clase oculto, la quito
  5.     if (ref.hasClass("oculto")) {
  6.         ref.removeClass("oculto");
  7.     }
  8. });
  9.  
  10. $('.recoger').click(function() {
  11.     // Selecciono todos los tr con la clase ocultable
  12.     var ref = $(".central_section").find("#mostrar_trabajo_wrapper").find(".ocultable");
  13.     // Si no tienen la clase oculto, la añado
  14.     if (!ref.hasClass("oculto")) {
  15.         ref.addClass("oculto");
  16.     }
  17. });

La función de desplegar funciona perfectamente, pero la de recoger sólo funciona si ninguno los tr con la clase "ocultable" tienen la clase "oculto", es decir, que si hay desplegado al menos uno de los tr, no funciona.

Si me pudierais decir donde está el fallo os lo agradecería.

Saludos.