Question

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);
});

Answer 1

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