javascript - 从一个数字计数到一个目标数字脚本并在多个框中使用它

Question

我在另一个主题上发现了这一点：

$({
    countNum: $('.skill-counter').text()
}).animate({
    countNum: 90
}, {
    duration: 2000,
    easing: 'linear',
    step: function () {
        $('.skill-counter').text(Math.floor(this.countNum) + 1 + ('%'));
    }
});

我试图改变的是把它放在一个函数中，并在具有不同计数值的多个框中使用它。

到目前为止我做了什么：

var count = function (counTo, divName) {
    this.counTo = 0;
    $(counTo).animate({
        counTo: counTo
    }, {
        duration: 2000,
        easing: 'linear',
        step: function () {
            $(divName).text(Math.floor(counTo) + 1 + ('%'));
        }
    });
};

count(90, 'box1');
count(70, 'box2');
count(50, 'box3');

它不起作用，这可能是正常的，因为它完全错误！那么我该怎么做呢？

Answer 1

var count = function (countTo, divName) {
    //Set the starting object as {countTo:0}
    $({countTo: 0}).animate({countTo: countTo}, {
        duration: 2000,
        easing: 'linear',
        step: function () {
            //get the reference to the value using 'this'
            $(divName).text(Math.floor(this.countTo) + 1 + ('%'));
        }
    });
};

//Pass resolvable selectors
count(90, '#box1');
count(70, '#box2');
count(50, '#box3');

演示小提琴