jQuery: Increment variable value based on clicks

Question

I have the following jQuery code:

var letter_a = 0;
var letter_b = 0;
var letter_c = 0;

$(".abc li a").click(function ()
{
    var selected = $(this).hasClass('selected');
    $(this).closest('ul.abc').find('li a').removeClass('selected');
    if (!selected)
    {
        $(this).addClass('selected');
    }

    if ($(this).hasClass("a"))
    {
        letter_a++;
    }
    else if ($(this).hasClass("b"))
    {
        letter_b++;
    }
    else if($(this).hasClass("a"))
    {
        letter_c++;
    }
});

What happens is when a person clicks a link like: <a class="a">Option A</a> it will increment the variable by one and so on and so on. But because users can deselect options and also change their minds, I also need it to decrement if they have chosen a different answer or deselected.

How would I do this?

Thanks

you can decrement the variables if person choose other option if ($(this).hasClass("a")) { letter_a++; letter_b--; letter_c--; } you have to do this in all cases. — Aamir Rind
– Aamir Rind, Commented Aug 10, 2011 at 12:27
What if this was the first question and so letter b was at 0? Would it become minus? — Cameron
– Cameron, Commented Aug 10, 2011 at 12:28
obviously when you are decrementing the variable you have to check if it is not 0 then decrement if (letter_b != 0){letter_b--;} — Aamir Rind
– Aamir Rind, Commented Aug 10, 2011 at 12:32
i can put this as an answer if it solved your problem, then award me up vote :p lol — Aamir Rind
– Aamir Rind, Commented Aug 10, 2011 at 12:34
The if statement would cause the value to be reset to 0 later on so I opted for the length as answered below. Thanks anyway pal. — Cameron
– Cameron, Commented Aug 10, 2011 at 12:42

Richard Dalton · Accepted Answer · 2011-08-10 12:34:11Z

4

Assuming this is using the same HTML as your other question I think it might be easier to just do a count of all of the selected items every time you select an answer:

var scoreA = 0, scoreB = 0, scoreC = 0;

$(".abc li a").click(function () {
    var t = $(this);
    var ul = t.closest('ul.abc');
    var selected = t.hasClass('selected');
    ul.find('li a').removeClass('selected');
    if (!selected)
        t.addClass('selected');

    calculateScores();
});

function calculateScores()
{
    scoreA = $('a.a.selected').length;
    scoreB = $('a.b.selected').length;
    scoreC = $('a.c.selected').length;

    alert("A: " + scoreA + ", B: " + scoreB + ", C: " + scoreC);
}

http://jsfiddle.net/huW4k/2/

answered Aug 10, 2011 at 12:34

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

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

Comments

mcgrailm · Accepted Answer · 2011-08-10 12:38:02Z

1

what are you going to do with the totals, I wonder if it would be easier to just get the length of selected boxes

 $(.a.selected).length;
 $(.b.selected).length;
 $(.c.selected).length;

edited Aug 10, 2011 at 12:38

answered Aug 10, 2011 at 12:30

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

1 Comment

Richard Dalton Over a year ago

length isn't a function :D Other than that, +1 for same idea as me :)

Aamir Rind · Accepted Answer · 2011-08-10 12:38:36Z

0

Do it like this:

 var letter_a = 0;
 var letter_b = 0;
 var letter_c = 0;

 $(".abc li a").click(function ()
{
var selected = $(this).hasClass('selected');
$(this).closest('ul.abc').find('li a').removeClass('selected');
if (!selected)
{
    $(this).addClass('selected');
}

if ($(this).hasClass("a"))
{
    letter_a++;
    if(letter_b != 0){
      letter_b--;}

    if(letter_c != 0){
      letter_c--;}
}
else if ($(this).hasClass("b"))
{
    letter_b++;

    if(letter_a != 0){
      letter_a--;}

    if(letter_c != 0){
      letter_c--;}
}
else if($(this).hasClass("a"))
{
    letter_c++;

    if(letter_a != 0){
      letter_a--;}

    if(letter_b != 0){
      letter_b--;}
}
});

answered Aug 10, 2011 at 12:38

Aamir Rind

39.8k24 gold badges131 silver badges169 bronze badges

1 Comment

Cameron Over a year ago

This has issues as if the value isn't 0 then it would decrement it and the value gets lost between questions. The length works better in this case. Thanks for the help though.

Collectives™ on Stack Overflow

jQuery: Increment variable value based on clicks

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related