jQuery: on click add class and set a variable

Question

The idea is to change the class of a link to active while removing active from other links and to set a variable to a value depending on the link that is clicked. If "1" is clicked the variable firstNumber would be 1. This is for kind of a "validation" later on. The code is below, the class changing works if the "if else if..." part is removed, so something must be wrong with that part, just what?

$(document).ready(function (){
    $('.numbers-1 a').click(function(){
        $('.numbers-1 a').removeClass('active');
        $(this).addClass('active');

        if ( $(this).hasClass('num-1') ) {
            var firstNumber = 1;
        } else if ( $(this).hasClass('num-2') ) {
            var firstNumber = 2;
        } else if ( $(this).hasClass('num-3') ) {
            var firstNumber = 3;
        } else ( $(this).hasClass('num-4') ) {
            var firstNumber = 4;
        };
    });
});

the html is here

<div class="numbers-1">
    <a class="num-1" href="#">1</a>
    <a class="num-2" href="#">2</a>
    <a class="num-3" href="#">3</a>
    <a class="num-4" href="#">4</a>
</div>

So, why is the if statement not working in the jquery?

A little tweak suggestion: you don't need this whole block, if you use jquery's $(this.data("myvar") function and data-myvar="1" tags on the elements. — Balint Bako
– Balint Bako, Commented Jun 24, 2013 at 8:10

dsgriffin · Accepted Answer · 2013-06-24 08:05:12Z

2

else was supposed to be an else if on your final statement I'm assuming as else doesn't take a conditional statement.

else if ( $(this).hasClass('num-4') ) {
   var firstNumber = 4;
}

jsFiddle here.

edited Jun 24, 2013 at 8:05

answered Jun 23, 2013 at 20:47

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

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

1 Comment

user1425689 Over a year ago

Well that was simple... Thanks! Come up with a simple way to check the selected numbers?

M.G.Manikandan · Accepted Answer · 2013-06-24 08:36:37Z

0

Just tried to simplify your code. What about this ?

$(document).ready(function (){
    $('.numbers-1 a').click(function(){
        $('.numbers-1 a').removeClass('active');

        var currentClass = $(this).attr('class');

        $(this).addClass('active');

        var firstNumber = parseInt(currentClass.split('-')[1]);
    });
});

answered Jun 24, 2013 at 8:36

M.G.Manikandan

9935 silver badges7 bronze badges

Collectives™ on Stack Overflow

jQuery: on click add class and set a variable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related