Question

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

目前我的代码如下：

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

那么如何区分我的jQuery代码中的每个'reply'超链接按钮？

Answer 1

您当前的模板将导致HTML文档无效（假设模板已多次展开）：id值必须在文档中是唯一的，因此您不能只是将“回复”作为id。

我可能会将“回复”从id更改为class。然后你可以将它们全部挂钩directly：

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

...或使用delegation：

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

（使用jQuery 1.7及更高版本，您可以使用on代替delegate;请注意参数的顺序不同。）

在您的事件处理程序中，this将引用已点击的特定a元素，因此您可以（例如）获取您的data-messageid属性，如下所示：

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

...并使用回复链接周围的结构做任何您喜欢的事情。

Answer 2

首先，由于每条消息都会显示“回复”按钮，因此请勿使用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>

Answer 3

<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

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

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

3 个答案: