匹配变量不更新

Question

这个概念与滑块相似。 Here is the JsFiddle

每个部分都设置为：

visibility: hidden;

直到分配了“anim-in”类。问题在于var $ currSection和$ nextSection需要var $ rightCounter来正确评估。

var $currSection = $rightCounter;
var $nextSection = $rightCounter + 1;

$ rightCounter在计数器功能中更新：

    function counter (event){

    var $counterSelect = $(this).attr('id'); 

     if ( $counterSelect == "right") {

        if ( $rightCounter >= 0 && $rightCounter <= 4){
            $rightCounter += 1;
            console.log($rightCounter);

            if ($leftCounter <= 0) {
                $leftCounter = 0;
                console.log($leftCounter);
            }

            else {
                $leftCounter -= 1;
                console.log($leftCounter);
            }

        }

    }

    else {

        if ($leftCounter >= 0 && $leftCounter <= 4){

            $leftCounter += 1;
            console.log($leftCounter);

            if ($rightCounter <= 0) {
                $rightCounter = 0;
                console.log($rightCounter);
            }

            else {
                $rightCounter -= 1;
                console.log($rightCounter);
            }

        }

    }

    animOut();
    return $rightCounter;

};

animOut函数使用$ currSection和$ nextSection重新分配类，但它们没有使用$ rightCounter进行更新？

注意：控制台日志用于显示vars正在评估的内容