如何使用 jQuery 进行计数器同时保持高分？

Question

我正在努力为问答游戏制作一个非常简单的计数器，它也能保持高分。除了两个问题外，它工作得很好：

1) 当我点击刷新当前分数将当前分数归零时，它会正确刷新，但是当我开始点击分数按钮时，它也会重置高分。

2) 我的 .animate() 也不起作用，我不明白为什么？

这是我的 HTML:

<header class="controls">
    <div id="refresh-score"></div>
    <p class="scoreboard">HIGH | <span id="high-score-value"></span></p>
</header>
<h1 class="title-big" id="current-score-value"><div id="overlay"></div></h1>
<div id="score-button">+</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="car-trivia.js"></script>

jQuery:

$(function(){
    var currentScore = 0;
    var highScore = 0;

    $('#high-score-value').append(highScore);

    $('#current-score-value').append(currentScore);

    $('#refresh-score').click(function(){
        console.log("refresh click");
        currentScore = 0;
        $('#current-score-value').html(currentScore);
        $('#refresh-score').animate({
            transform: "rotate(-360deg)"
        }, 500);
    });

    $('#score-button').click(function(){
        console.log("score click");
        currentScore++;
        $('#current-score-value').html(currentScore);
        if (currentScore > highScore) {
            $('#high-score-value').html(currentScore);
        } else {
            $('#high-score-value').html(highScore);
        }
    };

    $('.overlay').animate({
        width: "200vw",
        height: "200vw"
        }, 500)
    });

})

Answer 1

我已经删除了动画内容，因为如果你没有在大括号和方括号上犯错，那是可行的。您从未更新过 var highScore，因此在点击刷新按钮后您的逻辑不再相加，请参阅下面代码中的注释：http://jsfiddle.net/xukh3p3e/2/

$(function(){
        var currentScore = 0;
        var highScore = 0;

        $('#high-score-value').append(highScore);

        $('#current-score-value').append(currentScore);

        $('#ref').click(function(){
            console.log("refresh click");
            currentScore = 0;
            $('#current-score-value').html(currentScore);
            $('#ref').animate({
                transform: "rotate(-360deg)"
            }, 500);
        });

        $('#score-button').click(function(){
            console.log(highScore);
            console.log(currentScore);
            currentScore++;

            $('#current-score-value').html(currentScore);
            if (currentScore > highScore) {
                $('#high-score-value').html(currentScore);
                 highScore++;//MUST UPDATE HIGHSCORE VARIABLE HERE :)
            } else {
                $('#high-score-value').html(highScore);
            }
        });

        $('.overlay').animate({
            width: "200vw",
            height: "200vw"
            }, 500);
        });

如何使用 jQuery 进行计数器同时保持高分？

How do I make a counter with jQuery that also keeps high score?

math

jquery

animation