使用 jQuery 识别特定元素答案

【问题标题】：Identify specific element with jQuery使用 jQuery 识别特定元素
【发布时间】：2011-06-17 04:06:58
【问题描述】：

我正在实现一个投票系统，我想使用 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);
});

【问题讨论】：

什么是voteAction？ $.post 需要 url 作为第一个参数
你不能给
元素一个 ID 吗？例如。

并使用 jQuery 获取类型为

的父元素的 id？您需要在某个地方保存您的 postid。
@Colin：问题是我不知道如何选择 id 一旦我将它添加到 p 元素。

标签： jquery ajax css-selectors

【解决方案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){
        $("")
    });
});

【讨论】：

【解决方案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

    ...
}

【讨论】：

但是为什么data-postid，它违反了标准。
不，它没有，它是有效的 HTML 5：ejohn.org/blog/html-5-data-attributes 我的问题是在所有不同的浏览器中处理得如何。
@roberkules @Daff 它甚至可以在 IE6 上运行 stackoverflow.com/questions/2412947/…
但是现在每个人都在做 HTML5 吗？是的，IE6 支持它——只是说它违反了标准合规性（验证器检查会引发错误）

【解决方案3】：

为每个链接元素添加一个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){
        $("")
    });
});

【讨论】：

我选择这个，似乎是最简单的解决方案。谢谢！

【解决方案4】：

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

<p id="post-234">

</p>

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

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

【讨论】：

【解决方案5】：

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

$(this).attr('id')

对于帖子ID

【讨论】：

【解决方案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){
        $("")
    });
});

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

【讨论】：

【解决方案7】：

在帖子的包装器中添加一个 id 以及一个特定的类 ie。

<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){
        $("")
    });
});

【讨论】：

在您的split() 中缺少'-'