Question

I’m having much trouble figuring this out, so maybe someone can help me.

This is my 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>

And my JS:

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

Basically what I want to do is change the value of the inner span with the value that data contains. The code above does work, but it is changing the content of every span, and not only the child of the clicked anchor.

Another thing I want to do is disable the anchor tag once a vote has been submitted.

Any ideas how to do this?

Answer 1

Try:

$(".voteUp").click(function(){
    var voteUp = $(this);
    if(voteUp.hasClass('disabled'){
        // don't do anything, because it's disabled
    } else{
        $.post(voteAction({postid: this.id, type: 'up'}), function(data){
            voteUp
                .addClass('disabled') // add a class, which you can check on a click event fired
                .find("span")
                .html(data);
        });
    }
});