jquery - jQuery：单击添加类并设置变量

Question

这个想法是将链接的类更改为活动，同时从其他链接中删除活动，并根据单击的链接将变量设置为一个值。如果单击“1”，则变量 firstNumber 将为 1。这用于稍后的“验证”。代码如下，如果删除了“if else if ...”部分，则类更改有效，所以该部分一定有问题，只是什么？

$(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;
        };
    });
});

html在这里

<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>

那么，为什么 if 语句在 jquery 中不起作用？

Answer 1

else应该是else if你的最后陈述，我假设else不带条件陈述。

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

jsFiddle在这里。

Answer 2

只是试图简化你的代码。那这个呢 ？

$(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]);
    });
});