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

[reynierpm]

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 i = 0;
    $(".wall-post a").each(function(i){
      $(".comment-link" + i).click(function(){
        $(".comment-box_" + i).slideToggle();
      });
      i++;
}); 
   

No deberia funcionar? Q estoy haciendo mal?

[Dafonz]

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:

$('a[class^="comment-link"]').click(function(){
            var id = $(this).attr("class").substring($(this).attr("class").length-1,$(this).attr("class").length);
            $('.comment-box_'+id).toggle();
        });
 

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.

[reynierpm]

Si puedo cambiar el HTML, que me sugieres? estoy buscando la forma mas optima y mejor de lograrlo !!

[Dafonz]

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:

<a href="#" class="comment-link" title="1">Comment</a>
 

Código HTML:

<div class="span5 offset-1" id="comment-box-1" style="display: none">
 

El javascript:

Código Javascript:

$('.comment-link').click(function() {
    $('#comment-box-'+$(this).attr("title")).toggle();
});
 

[reynierpm]

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

[Dafonz]

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..

[reynierpm]

Ups pues no me deja eliminarlos ni editar el POST y te los iba a enviar por MP pero no encontre como

[reynierpm]

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 ;)

[Dafonz]

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

[reynierpm]

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

[Dafonz]

Mi sugerencia es que hagas algo asi:

Código HTML:

<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 />
    <a href='#' class='comment-link' hreflang='1'>Comment</a></p>
    <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 />
    <a href='#' class='comment-link' hreflang='2'>Comment</a></p>
    <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 />
    <a href='#' class='comment-link' hreflang='3'>Comment</a></p>
    
    
    <input type='hidden' id='idComentario'>
    <div class='comment-box' style='display:none; background:#FFF; border:1px solid;'>
        AQUI PARA PONER COMENTARIO
    </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:

$('.comment-link').click(function(){
            $('#idComentario').val($(this).attr("hreflang"));
            var posicion = $(this).offset();
            $('.comment-box').css('position','absolute')
                            .css('top',posicion.top+20)
                            .css('left',posicion.left)
                            .show("fast");
        });
 

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:

$('comment-link').click(function() {
      $('#comment-box'+$(this).attr("title")).toggle();
    });
 

Te falto un . antes de comment-link, ya que ahí no esta seleccionado nada para agregarle el listener de click

[reynierpm]

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.

[Dafonz]

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:

<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 />
    <a href='#' class='comment-link' hreflang='1'>Comment</a></p>
    <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 />
    <a href='#' class='comment-link' hreflang='2'>Comment</a></p>
    <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 />
    <a href='#' class='comment-link' hreflang='3'>Comment</a></p>
    
    <input type='hidden' id='idComentario'>
 

Igual 3 parafos con sus links..

Código Javascript:

var id;
        $('.comment-link').click(function(){
        if(id == $(this).attr("hreflang")) { $('.comment-box').remove(); id = ""; $('#idComentario').val(null); return; }
        $('.comment-box').remove();
        id = $(this).attr("hreflang");
        $('#idComentario').val(id);
        $(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>");
        $('.comment-box').show("fast");
    });
        
        $('#comentar').live("click",function() {
            //enviar datos de comentario
            $('.comment-box').remove();
            id = "";
            $('#idComentario').val(null);
        });
 

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..

[reynierpm]

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