Identify specific element with jQuery

I'm implementing a vote system and I want to use jQuery. I have the working code for the vote on a single page, but the problem is that I want to be able to vote from my main page as well and I don't know how to identify for which post the vote is intended.

My HTML looks like this:

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

开发者_开发百科(please ignore the multiple span tags)

This is the JS code I have right now:

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

So how do I identify for which post the click is meant (and replace the hardcoded postid with the chosen id?) I could add the postid with ${post.id} somewhere in the html, but I don't see how to exactly use it. I can't afford to generate a custom jQuery .click function for each post, right?

EDIT:

Any idea how I update the span tags content afterwards? I tried this but it's not working:

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

You need to add the postid somewhere in your template. It doesn't matter where as long as you can retrieve it every time.

Example:

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

Store the postid on the element using an data- attribute, e.g.

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

Then on your click event:

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

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

    ...
}

add an id attribute to each link element:

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

reference the element in the JS code:

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

you could store the id in the surrounding p tag

<p id="post-234">

</p>

and extract it from there using e.g. jQuery

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

Give each link an ID that matchs the post ID, and then use

$(this).attr('id')

For the post ID

I think you'll want to investigate using html5 data attributes.

For instance, your html may become:

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

While your JS would read:

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

While this isn't the best doc available, this should

Add an id to the wrapper of the post along with a specific class 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>

then

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