Change value on page upon click using jQuery

Question

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>

Are you saying that you also want to remove the link after the user clicks the image? — j08691
– j08691, Commented Jan 8, 2015 at 17:03

Milind Anantwar · Accepted Answer · 2015-01-08 17:04:10Z

3

You can use:

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

Working Demo

edited Jan 8, 2015 at 17:04

answered Jan 8, 2015 at 16:56

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

j08691 Over a year ago

Don't forget the radix when using parseInt.

Gary Woods Over a year ago

@j08691 What do you mean with radix?

j08691 Over a year ago

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user4433897 · Accepted Answer · 2015-01-08 17:29:58Z

1

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/

answered Jan 8, 2015 at 17:29

user4433897

Comments

Aram Tchekrekjian · Accepted Answer · 2015-01-08 17:14:23Z

0

Try this too:

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

edited Jan 8, 2015 at 17:14

answered Jan 8, 2015 at 17:01

Aram Tchekrekjian

93511 silver badges26 bronze badges

1 Comment

bipen Over a year ago

BTW you forgot to add a class selector . in front

Collectives™ on Stack Overflow

Change value on page upon click using jQuery

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related