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函数，对吗？

修改

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

$.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

为每个链接元素添加一个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以及一个特定的类，即

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

Answer 6

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

$(this).attr('id')

对于帖子ID

Answer 7

我想你会想要调查使用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){
        $("")
    });
});

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

使用jQuery识别特定元素

7 个答案: