Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con seleccion de elementos con incremento, no deberia esto funcionar ?

Estas en el tema de Problema con seleccion de elementos con incremento, no deberia esto funcionar ? en el foro de Frameworks JS en Foros del Web. Hola: Tengo el siguiente marcado HTML: Código: <div class="span7 offset1 wall-post"> <div class="span1" style="text-align: right"><img src="http://www.gravatar.com/avatar/7b7690d4de079ea9f3c51eac3b06d95d?s=50&amp;r=g" alt="Gravatar" class="gravatar" /></div> <div class="span5">sdfsdf</div> <div class="clearfix"></div> <div class="span6 ...
  #1 (permalink)  
Antiguo 04/05/2012, 13:50
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Problema con seleccion de elementos con incremento, no deberia esto funcionar ?

Hola:
Tengo el siguiente marcado HTML:
Código:
<div class="span7 offset1 wall-post">
          <div class="span1" style="text-align: right"><img src="http://www.gravatar.com/avatar/7b7690d4de079ea9f3c51eac3b06d95d?s=50&amp;r=g" alt="Gravatar" class="gravatar" /></div>
          <div class="span5">sdfsdf</div>
          <div class="clearfix"></div>
          <div class="span6 wall-links" style="text-align: right">
            Writed by: ReynierPM, 31 minutes ago            - <i class="icon-edit"></i> <a href="#" class="comment-link0">Comment</a>          </div>
          <div class="clearfix"></div>
          <div class="comment-box_0 span5 offset-1" style="display: none">
            <hr>
            <div class="span3 input-append">
              <input type="hidden" name="p_id_0" id="p_id_0" value="6" />
              <textarea id="comments_0" name="comments_0" placeholder="Comments" class="input-xlarge comments_6"></textarea>
              <button type="button" class="btn btn-inverse" id="send_comment">Comment</button>
            </div>
          </div>
        </div>
              
        <div class="span7 offset1 wall-post">
          <div class="span1" style="text-align: right"><img src="http://www.gravatar.com/avatar/7b7690d4de079ea9f3c51eac3b06d95d?s=50&amp;r=g" alt="Gravatar" class="gravatar" /></div>
          <div class="span5">asdasdad</div>
          <div class="clearfix"></div>
          <div class="span6 wall-links" style="text-align: right">
            Writed by: ReynierPM, 32 minutes ago            - <i class="icon-edit"></i> <a href="#" class="comment-link0">Comment</a>          </div>
          <div class="clearfix"></div>
          <div class="comment-box_0 span5 offset-1" style="display: none">
            <hr>
            <div class="span3 input-append">
              <input type="hidden" name="p_id_0" id="p_id_0" value="5" />
              <textarea id="comments_0" name="comments_0" placeholder="Comments" class="input-xlarge comments_5"></textarea>
              <button type="button" class="btn btn-inverse" id="send_comment">Comment</button>
            </div>
          </div>
        </div>
              
        <div class="span7 offset1 wall-post">
          <div class="span1" style="text-align: right"><img src="http://www.gravatar.com/avatar/7b7690d4de079ea9f3c51eac3b06d95d?s=50&amp;r=g" alt="Gravatar" class="gravatar" /></div>
          <div class="span5">asdasd</div>
          <div class="clearfix"></div>
          <div class="span6 wall-links" style="text-align: right">
            Writed by: ReynierPM, 32 minutes ago            - <i class="icon-edit"></i> <a href="#" class="comment-link0">Comment</a>          </div>
          <div class="clearfix"></div>
          <div class="comment-box_0 span5 offset-1" style="display: none">
            <hr>
            <div class="span3 input-append">
              <input type="hidden" name="p_id_0" id="p_id_0" value="4" />
              <textarea id="comments_0" name="comments_0" placeholder="Comments" class="input-xlarge comments_4"></textarea>
              <button type="button" class="btn btn-inverse" id="send_comment">Comment</button>
            </div>
          </div>
        </div>
Y este codigo jQuery que deberia permitirme mostrar cada uno de los DIV de forma independiente cuando se haga click sobre el enlace apropiado:

Código PHP:
var 0;
    $(
".wall-post a").each(function(i){
      $(
".comment-link" i).click(function(){
        $(
".comment-box_" i).slideToggle();
      });
      
i++;
}); 
No deberia funcionar? Q estoy haciendo mal?
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #2 (permalink)  
Antiguo 04/05/2012, 14:46
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

No creo que sea la mejor forma de hacerlo, me refiero a concatenar la clase y el id.. pero si no puedes cambiar la estructura del html una forma de hacerlo es asi:
Código Javascript:
Ver original
  1. $('a[class^="comment-link"]').click(function(){
  2.             var id = $(this).attr("class").substring($(this).attr("class").length-1,$(this).attr("class").length);
  3.             $('.comment-box_'+id).toggle();
  4.         });
sacas los que comienzan con comment-link y haces un substring para sacar el id y ya nada mas muestras su comment-box correspondiente.
En tu ejemplo todos tienen el mismo pero asumo que solo copiaste varias veces.
  #3 (permalink)  
Antiguo 04/05/2012, 14:48
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Si puedo cambiar el HTML, que me sugieres? estoy buscando la forma mas optima y mejor de lograrlo !!
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #4 (permalink)  
Antiguo 04/05/2012, 14:58
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Pues hay muchas formas de hacerlo.. pero ya dependería mas de como dejes el html.. si con jerarquía o selector.. yo al menos algo así sencillo seria poner otro attributo como title por ejemplo y tambien las comment-box usar id ya que es si ya son unicas usar id y la clase dejarla para el css y que si sean iguales sin complicartela, osea algo asi:
Comment-links
Código HTML:
Ver original
  1. <a href="#" class="comment-link" title="1">Comment</a>

Código HTML:
Ver original
  1. <div class="span5 offset-1" id="comment-box-1" style="display: none">

El javascript:
Código Javascript:
Ver original
  1. $('.comment-link').click(function() {
  2.     $('#comment-box-'+$(this).attr("title")).toggle();
  3. });
  #5 (permalink)  
Antiguo 04/05/2012, 15:08
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

No me funciona, podes ver un ejemplo aca: http://comvivem.treswd.com/net/index.php/blog entra con usuario reynierpm y pass 1qazxsw2 y luego pone esta URL http://comvivem.treswd.com/net/index.php/wall y da clic en cualquier enlace Commentar
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #6 (permalink)  
Antiguo 04/05/2012, 15:11
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

No creo que deberías dejar esos datos aquí , y sobre el problema si te fijas todos tienen el mismo title y el comment-box tmb el mismo id.. osea se supone que era title=1, title=2 title=3 etc etc.. al igual que comment-box-1,comment-box-2,comment-box-3,etc..
  #7 (permalink)  
Antiguo 04/05/2012, 15:13
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Ups pues no me deja eliminarlos ni editar el POST y te los iba a enviar por MP pero no encontre como
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #8 (permalink)  
Antiguo 04/05/2012, 15:17
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Pues yo veo el HTML bien generado o sea:
Código:
<a title="0" class="comment-link" href="#">Comment</a>
y para el DIV lo siguiente:
Código:
<div style="display: none" id="comment-box-0" class="comment-box span5 offset-1">
            <hr>
            <div class="span3 input-append">
              <input type="hidden" value="10" id="p_id_0" name="p_id_0">
              <textarea class="input-xlarge comments_10" placeholder="Comments" name="comments_0" id="comments_0"></textarea>
              <button id="send_comment" class="btn btn-inverse" type="button">Comment</button>
            </div>
          </div>
PD: Le cambio la contraseña una vez termine de solucionar el problema ;)
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #9 (permalink)  
Antiguo 04/05/2012, 15:28
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Pero todos tienen 0.. es decir title=0 y comment-box-0.. siendo que deberian tener diferente id... ahora si la caja de comentar es igual en todos porque no haces solamente una y la agregar abajo de donde dieron click en vez de en cada mensaje poner una capa oculta.. para mi eso seria lo mejor
  #10 (permalink)  
Antiguo 07/05/2012, 08:59
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Hmmm dos cosas: la primera es que ya solucione el tema de que no se incrementaban los valores pero aun asi sigue sin funcionar y la segunda me explicas mejor tu sugerencia? Me gusta la idea pero no tengo la menor idea de como hacerlo.

Saludos y gracias por la ayuda
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #11 (permalink)  
Antiguo 07/05/2012, 09:24
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Mi sugerencia es que hagas algo asi:

Código HTML:
Ver original
  1. <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  2.     <a href='#' class='comment-link' hreflang='1'>Comment</a></p>
  3.     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br />
  4.     <a href='#' class='comment-link' hreflang='2'>Comment</a></p>
  5.     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  6.     <a href='#' class='comment-link' hreflang='3'>Comment</a></p>
  7.    
  8.    
  9.     <input type='hidden' id='idComentario'>
  10.     <div class='comment-box' style='display:none; background:#FFF; border:1px solid;'>
  11.         AQUI PARA PONER COMENTARIO
  12.     </div>

Tengo 3 parrafos todos con su comment-link y su attributo de su id.. y tengo solo 1 capa de comentarios oculta y un input hidden..

Código Javascript:
Ver original
  1. $('.comment-link').click(function(){
  2.             $('#idComentario').val($(this).attr("hreflang"));
  3.             var posicion = $(this).offset();
  4.             $('.comment-box').css('position','absolute')
  5.                             .css('top',posicion.top+20)
  6.                             .css('left',posicion.left)
  7.                             .show("fast");
  8.         });

Esto es para si quieres flotante pero se puede insertar para que se recorran o como gustes.. pero por ejemplo lo que hago aquí es..
- Das click sobre comment-link
- Se iguala el id que trae al campo hidden (esto para saber a que mensaje corresponde el comentario).
- posiciono la ventana de comentario flotando abajo del comment-link que se clickeo..

entonces asi es solamente 1 capa de comment-box para todos.. y la haces dinámica para que aparezca según se necesite. Como te digo no es necesariamente flotante puede ser que aparezca abajo y se recorra todo y cuando se mande desaparezca y asi..

Y por lo que sigue sin funcionar es porque:

Código Javascript:
Ver original
  1. $('comment-link').click(function() {
  2.       $('#comment-box'+$(this).attr("title")).toggle();
  3.     });
Te falto un . antes de comment-link, ya que ahí no esta seleccionado nada para agregarle el listener de click

Última edición por Dafonz; 07/05/2012 a las 09:29
  #12 (permalink)  
Antiguo 07/05/2012, 10:16
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Gracias casi que funciona ahorita me salen las cajas posicionadas "absolute" claro esta pero como haria para ponerla debajo de cada comment-link correspondiente? Se me ocurre un "after" pero no se como decirle que se ponga justo debajo del comment-link al cual pertenece.
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com
  #13 (permalink)  
Antiguo 07/05/2012, 10:22
Avatar de Dafonz  
Fecha de Ingreso: octubre-2009
Mensajes: 127
Antigüedad: 9 años, 10 meses
Puntos: 36
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Si pues para eso era el posicionamiento a mano debe de salirte abajo.. pero si quieres insertarla mas que sea una flotando puede ser algo así:

Código HTML:
Ver original
  1. <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  2.     <a href='#' class='comment-link' hreflang='1'>Comment</a></p>
  3.     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br />
  4.     <a href='#' class='comment-link' hreflang='2'>Comment</a></p>
  5.     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
  6.     <a href='#' class='comment-link' hreflang='3'>Comment</a></p>
  7.    
  8.     <input type='hidden' id='idComentario'>

Igual 3 parafos con sus links..


Código Javascript:
Ver original
  1. var id;
  2.         $('.comment-link').click(function(){
  3.         if(id == $(this).attr("hreflang")) { $('.comment-box').remove(); id = ""; $('#idComentario').val(null); return; }
  4.         $('.comment-box').remove();
  5.         id = $(this).attr("hreflang");
  6.         $('#idComentario').val(id);
  7.         $(this).after("<div class='comment-box' style='display:none; background:#FFF; border:1px solid;'><textarea></textarea><br /><input type='button' id='comentar' value='Comment'></div>");
  8.         $('.comment-box').show("fast");
  9.     });
  10.        
  11.         $('#comentar').live("click",function() {
  12.             //enviar datos de comentario
  13.             $('.comment-box').remove();
  14.             id = "";
  15.             $('#idComentario').val(null);
  16.         });

Este tiene poco mas código ( no tenia nada que hacer xD) cuando le das click inserta después del articulo la caja de comentarios, claro validando que no se inserte varias veces o que si es el mismo solo cierre el comment-box (simular el toggle).. también tiene otra función que es cuando ya comentan y reinicia los valores necesarios para si vuelven a dar en otro link o el mismo para volver a comentar..
  #14 (permalink)  
Antiguo 11/05/2012, 06:52
 
Fecha de Ingreso: marzo-2011
Ubicación: Caracas
Mensajes: 140
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Problema con seleccion de elementos con incremento, no deberia esto funcio

Gracias por tu ayuda @Dafonz sos un crack. Tu solución me ha funcionado 100% pero ... siempre hay un pero he optado por una que yo mismo hice en base a tus explicaciones y fue usando jQuery UI y dialogos modales. Ahora bien me esta pasando que al dar clic sobre el enlace y mostrar el dialogo la primera vez me lo desaparece y tengo que volver a dar clic nuevamente sobre el enlace de los comentarios cosa que creo no deberia ser. Te paso el enlace y credenciales via PM a ver si me hechas una mano y ves algo que yo no me haya dado de cuenta y sea lo que este provocando ese comportamiento.

Saludos cordiales
__________________
Reynier Perez Mira
Skype: reynierpm
Site: http://www.reynierpm.com

Etiquetas: elementos, funcion, funcionar, html, incremento, input, jquery, seleccion
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 09:38.