各メッセージの「返信」ボタンを区別するのに良い方法はありますか？

Question

Flask MiniTwitの例では、Twitterのようなメッセージ返信システムを実装していますが、各メッセージには「返信」ボタンがあります。私は指定されたメッセージのための '返信'ボタンがクリックされたときに入力エリアと同様に返信を表示するために新しいdivを展開したいと思います。今は私のジンジャーテンプレートに「返信」ボタンを定義する方法がわかりません。

現在の私のコードは次のようなものです：

<a href=# data-messageid="{{message._id}}" id="reply"> 
Reply 
</a> 

私のjQueryのコード内の各「返信」にハイパーリンクボタンを区別するので、どのように？

Answer 1

<div class="replymessage" id="message{{message._id}}">content</div> 
<a href="#message{{message._id}}" class="reply">Reply</a> 


$('.reply').click(function() { 
    var item = $(this).attr('href'); 
    $(item).slideToggle(300); 
}); 

Demo Here

基本的には対応のdivのためのIDで、その後、ボタンのhrefにおける動的なID番号を使用します。このようにして、hrefでリンクをクリックすると、同じIDのdivが開きます。

Answer 2

あなたの現在のテンプレートが無効なHTML文書になります（テンプレートと仮定して複数回に拡大されます）：あなただけの持っているidとして「返信」することはできませんので、id値は、文書内で一意でなければなりません。

idからclassに「返信」が変更されている可能性があります。引数の順序ことに注意してください。

$("container_for_replies").delegate("a.reply", "click", function(event) { ... }); 

（jQueryの1.7とアップを使用して、あなたの代わりにdelegateのonを使用することができます。

$("a.reply").click(function(event) { ... }); 

...またはdelegationを使用して：その後、あなたはそれらをすべてdirectlyをフックすることができます）

thisは、クリックされた特定のa要素を参照するので、あなたの01を得ることができますこのような属性：

var messageid = $(this).attr("data-messageid"); 

...そしてあなたが返信リンク周辺の構造を好きな何かを行います。

Answer 3

まず、「返信」ボタンが各メッセージに表示されるので、id="reply"を使用しないでください。 class="reply"が良いでしょう。

そして、私は、これはあなたが欲しいものだと思う：

<a href=# data-messageid="1" class="reply">Reply</a> 
<a href=# data-messageid="2" class="reply">Reply</a> 
<script type="text/javascript"> 
    $().ready(function() { 
     $('.reply').click(function (argument) { 
      alert($(this).attr('data-messageid')); 
     }); 
    }); 
</script>