Mi sugerencia es que hagas algo asi:
Código HTML:
Ver original<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
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$('.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
:
Ver original$('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