什么是区分每条消息的“回复”按钮的好方法?

我正在修改Flask MiniTwit示例以实现类似Twitter的消息回复系统,每条消息都有一个“回复”按钮。 我想扩展一个新的div来显示回复以及输入区域当点击指定消息的“回复”按钮时。 但现在我不知道如何在我的jinja模板中定义“回复”按钮。

目前我的代码如下:

 Reply  

那么如何区分我的jQuery代码中的每个’回复’超链接按钮?

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

在这里演示

基本上你在按钮的href中使用动态id号,然后在相应div的ID中。 这样,当您单击带有href的链接时,将打开具有相同ID的div。

您当前的模板将导致HTML文档无效(假设模板被多次展开):文档中的id必须是唯一的,因此您不能只将“回复”作为id

我可能会将“回复”从id更改为class 。 然后你可以直接挂钩它们:

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

……或使用代表团 :

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

(使用jQuery 1.7及更高版本,您可以使用on而不是delegate ;请注意参数的顺序是不同的。)

在您的事件处理程序中, this将引用特定a单击元素,因此您可以(例如)获取您的data-messageid属性,如下所示:

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

…并使用回复链接周围的结构执行您喜欢的任何其他操作。

首先,由于每条消息都会显示“回复”按钮,因此请勿使用id="reply"class="reply"会更好。

而且我认为这就是你想要的:

 Reply Reply