Comment organiser les partages d'utilisateurs pour ajouter facilement des commentaires à ce post particulier?

Question

Dans un projet, j'ai un flux pour les utilisateurs, tout le monde peut partager et commenter sur les partages. J'ajoute des commentaires à la volée à chaque part. La structure générale est comme ci-dessous:

J'ai récemment entendu que l'utilisation de numéros pour les ID ne sont pas du tout une bonne idée, coz ils ne sont pas pris en charge par CSS. Si je le change en classe j'ai un nouveau problème: je ne serai pas capable de reconnaître quel poste a été cliqué (Si ID n'est pas un numéro, je ne serais pas capable d'obtenir cet ID de partage particulier).

Le code que j'ai jQuery est quelque chose comme ci-dessous:

$("div.comment").click(function(){ // Add comment link 
      var jusid = $(this).attr('id'); 
      var content = "<textarea name='txtcomment' class='txtcomment' cols='67' rows='7'></textarea><button name='btncomment' class='btncomment'>Submit</button><div class='closecomment'>Close</div>"; 
      $("div#after"+jusid).html(content); 
      $("div#after"+jusid).find('.txtcomment').focus(); 
     }); 

Il est en fait embrouillé, et je suis sûr que ce sera un gâchis dans un proche avenir. Quelle est la meilleure façon de procéder? Comment ne pas avoir un numéro pour les ID et de plus reconnaître quel div avec quel numéro d'identification a été cliqué? (Nous devons ajouter ce commentaire pour ce partage spécifique)

Answer 1

Si je Comprenez bien que vous n'avez pas besoin d'identifiant pour le faire.

Exemple html:

<div> 
    <h3>#1333</h3> 
    <p>Lorem ipsum</p> 
    <a class="comment" data-postid="1333">Add a comment</a> 
</div>​ 

Exemple Java Script:

$("a.comment").click(function() { 
    var $this = $(this), 
     isOpen = !$this.next().length, 
     $textarea; 

    if (!isOpen) { 
     $this.next().focus(); 
     return; 
    } 

    $textarea = $("<textarea/>"); 

    $this.after(
     $textarea 
      .after(
       $("<button/>") 
        .text("Submit") 
        .click(
         {$textarea: $textarea, postId: $this.attr("data-postid")}, 
         submitComment 
        ) 
      ) 
      .after(
       $("<button/>") 
        .text("Close") 
        .click(/* maybe do something here? */) 
      ) 
    ); 

    $textarea.focus(); 
}); 

submitComment = function (event) { 
    var message = event.data.$textarea.val(), 
     postId = parseInt(event.data.postId, 10); 

    alert("Do something with these:\nComment: " + message + "\nPost Id: " + postId); 
}; 

Cela ajoutera un textarea et deux buttons après le commentaire-lien clicked (et se concentrer sur la textarea).

style au goût :)

Voici un fiddle pour vous. (UPDATED)

Answer 2

Vous pouvez placer un ID de la publication dans un champ masqué à l'intérieur du message. De cette façon, vous serez en mesure de récupérer l'identifiant de la publication lorsque vous avez cliqué dessus.

[Modifier]

Supposons que vous ayez une structure html comme:

<div class='comment'> 
    <input type='hidden' class='post_id' value='1'/> 
</div> 
<div class='comment'> 
    <input type='hidden' class='post_id' value='2'/> 
</div> 
<div class='comment'> 
    <input type='hidden' class='post_id' value='3'/> 
</div> 

Vous pouvez avoir votre quelque chose comme jQuery:

$("div.comment").click(function(){ 
      var clicked_post_id = $(this).find('input.post_id').val(); 

      // Perform other operations with the above retrieved clicked_post_id 

}); 

DEMO à http://jsfiddle.net/7wCJK/2/