使用 jQuery 识别特定元素

Question

我正在实现一个投票系统，我想使用 jQuery。我在单个页面上有投票的工作代码，但问题是我也希望能够从我的主页投票，并且我不知道如何确定投票的目的是哪个帖子。

我的 HTML 看起来像这样：（

<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

请忽略多个 span 标签）

这是我现在拥有的 JS 代码：

$(".voteUp").click(function(){
    $.post(voteAction({postid: '5', type: 'up'}), function(data){
        $("")
    });
});

那么我如何识别点击是针对哪个帖子的（并用所选的 id 替换硬编码的 postid？）我可以在 html 中的某处添加带有 ${post.id} 的 postid，但我不知道如何准确使用它。我无法为每个帖子生成自定义 jQuery .click 函数，对吧？

编辑：

知道如何更新跨度标签内容吗？我尝试了这个，但它不起作用：

$.post(voteAction({postid: this.id, type: 'up'}), function(data){
    $(".voteUp a span").html(data);
});

Answer 1

您需要在模板中的某处添加 postid。只要每次都能检索到，在哪里都没关系。

例子：

<p>
post #2 content
<span><a href="#" class="voteUp" rel="${post.id}">I approve this message <span>${post.upvotes}</span></a></span>
</p>

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).attr('rel'), type: 'up'}), function(data){
        $("")
    });
});

Answer 2

使用 data- 属性将 postid 存储在元素上，例如

<p data-postid="5">
    <a href="#" class="voteUp">
</p>

然后在您的点击事件上：

$(".voteUp").click(function(){
    var $postBlock = $(this).closest("p"); // gets the post block

    var postid = $postBlock.data("postid"); // 5

    ...
}

Answer 3

给每个link元素添加id属性：

<p>
post content
<span><a href="#" class="voteUp" id="1">I approve this message <span>${post.upvotes}</span></a></span>
</p>

<p>
post #2 content
<span><a href="#" class="voteUp" id="2">I approve this message <span>${post.upvotes}</span></a></span>
</p>

在JS代码中引用该元素：

$(".voteUp").click(function(){
    $.post(voteAction({postid: this.id, type: 'up'}), function(data){
        $("")
    });
});

Answer 4

您可以将 id 存储在周围的 p 标记中

<p id="post-234">

</p>

，并使用例如 jQuery 从那里提取它

$(this).closest("p").attr("id").split("-")[1] --> the ID

Answer 5

为每个链接指定一个与帖子 ID 匹配的 ID，然后使用

$(this).attr('id')

For the post ID

Answer 6

我认为您会想使用 html5 数据属性进行研究。

例如，你的 html 可能会变成：

<a href="#" class="voteUp" data-post-id="5">I approve....</a>

虽然你的 JS 会读为：

$(".voteUp").click(function(){
    $.post(voteAction({postid: $(this).data("post-id"), type: 'up'}), function(data){
        $("")
    });
});

虽然这不是最好的可用文档，但这应该

Answer 7

将 id 与特定类一起添加到帖子的包装中，即。

<div class="post-votable" id="post-5">
<p>
post content
<span><a href="#" class="voteUp">I approve this message <span>${post.upvotes}</span></a></span>
</p>

然后

$(".voteUp").click(function(){
    $.post(voteAction({postid: $('this').closest('.post-votable')[0].id.split('-')[1], type: 'up'}), function(data){
        $("")
    });
});