外部访问Jquery插件函数

Question

我是jquery的新手，有一些基本的了解。

我正在尝试使用 jOdometer.js https://github.com/jesucarr/jodometer 。我可以很好地获取里程表，并且默认的 setInterval 方法使里程表滴答作响。

有一段代码

function advanceCounter() {
            setNumbers(counter);
            counter = counter + settings.increment; // increment the number 
            // if we reach the end clear the interval and use the ending number
            if(settings.counterEnd != false && counter >= settings.counterEnd){
                clearInterval(counterInterval);
                setNumbers(settings.counterEnd);
            }
        }
        // to move the colums from one number position to another
        function setNumbers(counter){
            digits = String(counter).split('.'); // check decimals
            // if we where using decimals
            if (decimalsArray.length > 0){
                // for each decimal digit, update the old digit position to the new
                for (i=0;i<decimalsArray.length;i++){
                    oldDigit = decimalsArray[i];
                    // the new numer could have not decimal part, but we need it anyway
                    if (digits[1]){
                        decimalsArray[i] = digits[1].charAt(i);
                    }
                    if (decimalsArray[i] == ''){
                        decimalsArray[i] = '0';
                    }
                    updatePosition($('.jodometer_decimal_'+i, scope), parseInt(decimalsArray[i]), parseInt(oldDigit));
                }
            }

            integers = digits[0];
            j=integers.length-1;
            // for each integer digit, update the old digit position to the new
            for (i=0;i<integersArray.length;i++){
                oldDigit = integersArray[i];
                integersArray[i] = integers.charAt(j);
                if (integersArray[i] == ''){
                    integersArray[i] = '0';
                }
                //alert($(this));
                updatePosition($('.jodometer_integer_'+i, scope), parseInt(integersArray[i]), parseInt(oldDigit));
                j--;
            }
        }
        // changes the column position from one number to another
        function updatePosition(col, newDigit, oldDigit){
            if(newDigit != oldDigit){
                col.stop();
                // if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
                if (newDigit == 0){
                    col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
                }else{
                    // if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
                    if (newDigit < oldDigit){
                        col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
                    }else{
                        col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
                    }
                }
            }
        }

会更新里程表。我正在使用 ajax 来获取新数据，并且我想更新里程表读数。如何从网页调用 advanceCounter() 或 setNumbers() 来更新里程表？

帮助。

这是实际插件的演示（来自作者本人）。 http://www.frontendmatters.com/demos/jodometer/

Answer 1

看起来您可以在获得如下新数据时设置它：

function updateTimer(newVal)
{
    $(".myCounter").jOdometer({ counterStart: newVal, counterEnd:newVal, numbersImage: 'images/jodometer-numbers.png'});
}

我不确定您希望增量是多少（如果有的话），但这应该可以解决问题。

更新：

这是带有内置动画的。

打开 jquery.jodometer.js 文件。
查看第 100 行（函数“advanceCounter()”正下方）并添加以下内容：

$.fn.Advance = function(newVal)
{
    setNumbers(newVal);
}

现在您可以通过执行以下操作来增加计数器：

$("#MyCounterDiv").Advance(150); //150  whatever new value you want.

更新 2：

我只使用一个计数器进行测试。 aVC指出，只有最后一个初始化的计数器会受到影响。
以下是我解决此问题的方法：

将 setNumbers 函数替换为：

function setNumbers(counter, elem){
    digits = String(counter).split('.'); // check decimals
    // if we where using decimals
    if (decimalsArray.length > 0){
        // for each decimal digit, update the old digit position to the new
        for (i=0;i<decimalsArray.length;i++){
            oldDigit = decimalsArray[i];
            // the new numer could have not decimal part, but we need it anyway
            if (digits[1]){
                decimalsArray[i] = digits[1].charAt(i);
            }
            if (decimalsArray[i] == ''){
                decimalsArray[i] = '0';
            }
            var theScope = (elem) ? elem : scope;
            console.log(theScope);
            updatePosition($('.jodometer_decimal_'+i, theScope), parseInt(decimalsArray[i]), parseInt(oldDigit));
        }
    }

    integers = digits[0];
    j=integers.length-1;
    // for each integer digit, update the old digit position to the new
    for (i=0;i<integersArray.length;i++){
        oldDigit = integersArray[i];
        integersArray[i] = integers.charAt(j);
        if (integersArray[i] == ''){
            integersArray[i] = '0';
        }
        var theScope = (elem) ? elem : scope;
        console.log(theScope);
        updatePosition($('.jodometer_integer_'+i, theScope), parseInt(integersArray[i]), parseInt(oldDigit));
        j--;
    }
}

我添加了另一个参数“elem”，该参数将在我们之前添加的 Advance 函数中传递。只需将 $.fn.Advance 函数更改为：

$.fn.Advance = function(newVal)
{
    setNumbers(newVal, $(this));
}

最后，我发现由于某种原因，我需要从 updatePosition 函数中删除 if 语句。这个 if 语句可以判断您是否试图告诉它“更改”为相同的数字。它会崩溃，因为它检查了错误的计数器设置。如果这很重要，我们可以解决这个问题，但我只是决定将其注释掉：P

function updatePosition(col, newDigit, oldDigit){
    //if(newDigit != oldDigit){
        col.stop();
        // if the number is 0 use the bottom 0 in the image, and change intantly to the top 0
        if (newDigit == 0){
            col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing).animate({top: zeroSet},1, 'linear');
        }else{
            // if the new number is lower than the old, we have to go to the bottom 0 and start from the top 0, with the apropiate speed, to don't note the jump
            if (newDigit < oldDigit){
                col.animate({top: (10*settings.heightNumber*-1)+zeroSet}, settings.speed*((10-oldDigit)/10), 'linear').animate({top: zeroSet},1, 'linear').animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed*oldDigit/10, settings.easing);
            }else{
                col.animate({top: (newDigit*settings.heightNumber*-1)+zeroSet}, settings.speed, settings.easing);
            }
        }
    //}
}

Answer 2

删除旧计数器并将其替换为一个新元素，您可以在该元素上调用 jodometer 插件：

$.ajax({
    success : function (serverResponse) {

        //create a new element to add to the DOM
        var $counter = $('<div id="counter" />');

        //replace the old `#counter` element with the new one (which has nothing bound to it)
        $('#counter').replaceWith($counter);

        //now initialize the plugin on the new DOM element
        $counter.jodometer({ ... });
    }
});

更新

要以动画方式显示内容的更改，您可以执行以下操作：

$.ajax({
    success : function (serverResponse) {

        //create a new element to add to the DOM
        var $counter = $('<div id="counter" style="display:none;" />');

        //replace the old `#counter` element with the new one (which has nothing bound to it)
        $('#counter').fadeOut(500).replaceWith($counter);

        //now initialize the plugin on the new DOM element
        $counter.fadeIn(500).jodometer({ ... });
    }
});

请注意，我添加了 style=在将新元素添加到 DOM 之前，对新元素添加“display:none;”，这样您就可以 fadeIn() 该元素。