CODEWITHSUNDEEP
jqueryhtml
Gary Woods
Gary Woods

Reputation: 1011

Change value on page upon click using jQuery

I have an upvote link. When user clicks on it, it hides the link (with upvote image) and shows image without link. It is very basic, see jsfiddle here.

My question is, how can I increase the value in <span class="vote_no">0</span> with + 1 upon click? So if value in that span tag is 23, then it should become 24.

jQuery:

jQuery(".vote_link").click(function() {
    // Hide link
    jQuery(this).andSelf().hide();

    // Show image
    jQuery(this).next(".vote_img_sub").show();
});

HTML:

<div class="vote_cont">
    <span class="vote_no">0</span>
    <a href="#" class="vote_link"><img class="vote_img" src="http://i.myegy.to/images/77e948107f9d.original.gif" width="52" height="30" /></a>
    <img class="vote_img_sub" src="http://i.myegy.to/images/77e948107f9d.original.gif" width="52" height="30" />
</div>

Upvotes: 1

Views: 37

Answers (3)

user4433897
user4433897

Reputation:

I would use .closest() to find the parent and then use .find() to locate .vote_no incase your html ever changed:

$(this).closest(".vote_cont").find(".vote_no").text(parseInt($(this).prev().text(),10)+1);

http://jsfiddle.net/6d5Lgeum/1/

Upvotes: 1

Aram Tchekrekjian
Aram Tchekrekjian

Reputation: 935

Try this too:

$('.vote_no').text(parseInt($('.vote_no').text())+1)

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

You can use:

 $(this).prev().text(parseInt($(this).prev().text(),10)+1);

Working Demo

Upvotes: 3

Related Questions