1

div で数値を取り、それをカウントアップする jQuery プラグインを作成しました。コールバックを追加しようとしたので、終了すると次の div で開始されます。

次の div で作業を開始すると、期待どおりに次の div を続行する前に、まず現在の div の番号をリセットします。プラグイン内で「this」を使用することに関係があると思われます。

ここに完全な（そうではない）動作例があります -->

これを防ぐにはどうすればよいですか？ありがとう

私のプラグイン：

(function( $ ) {
$.fn.countUp = function(options) {

    var settings = $.extend( {
        'startFrom'     : 0,
        'countTo'       : Number(this.text()),
        'start'         : 10,
        'frequency'     : 200,
        'jump'          : 1,
        'target'        : this,
        'log'           : false,
        'callback'      : ''
    }, options);

    var intRegex = /^\d+$/;
    if(intRegex.test(settings.countTo) && intRegex.test(settings.startFrom) ) {
        // Both settings are integers, get started:
        if(settings.startFrom<settings.countTo){
            offset = settings.jump;
        }else{
            offset = -1 * settings.jump;
        }
        current_number = settings.startFrom;
        settings.target.html(current_number);

        checkNumber();
        var timer;
        function checkNumber(){
            if(offset<0){
                if(current_number <= settings.countTo)
                {
                    current_number = settings.counTo;
                    clearTimeout(timer);
                    if (typeof settings.callback == 'function') { // make sure the callback is a function
                        settings.callback.call(this); // brings the scope to the callback
                    }
                }
                else
                {
                    current_number += offset;
                    timer=setTimeout(function(){checkNumber()},settings.frequency);
                }
            }else{
                if(current_number >= settings.countTo)
                {
                    current_number = settings.counTo;
                    clearTimeout(timer);
                    if (typeof settings.callback == 'function') { // make sure the callback is a function
                        settings.callback.call(this); // brings the scope to the callback
                    }
                }
                else
                {
                    current_number += offset;
                    timer=setTimeout(function(){checkNumber()},settings.frequency);
                }
            }
            settings.target.html(current_number);
            if(settings.log){console.log(settings.target.attr('id'))};
        }   

    }else{
       if(settings.log){console.log('From countUp: Please use an integer for startFrom and countTo arguments.');}
    }
};
})( jQuery );

そして、ここに私がそれを呼んでいる方法があります：

$(document).ready(function(){
    $("#output").countUp({
        'log' : true,
        'callback' : call2
    });

    function call2(){
        $("#output2").countUp({
            'log' : true,
            'callback' : call3
        });
    }

    function call3(){
        $("#output3").countUp({'log' : true});
    }
})
4

2 に答える 2

0

に設定されたスコープ外の変数を作成しますthis

var $this = this;

質問を正しく読んでいれば、問題は解決します。this関数スコープによって上書きされます。

アップデート

参考までに、コードにタイプミスがあります:

current_number = settings.counTo;

私はそれがすべきだとsettings.countTo思いますか？

編集されたコード

(function( $ ) {
$.fn.countUp = function(options) {

    var $this = this;

    var settings = $.extend( {
        'startFrom'     : 0,
        'countTo'       : Number($this.text()),
        'start'         : 10,
        'frequency'     : 200,
        'jump'          : 1,
        'target'        : $this,
        'log'           : false,
        'callback'      : ''
    }, options);

    var intRegex = /^\d+$/;
    if(intRegex.test(settings.countTo) && intRegex.test(settings.startFrom) ) {
        // Both settings are integers, get started:
        if(settings.startFrom<settings.countTo){
            offset = settings.jump;
        }else{
            offset = -1 * settings.jump;
        }
        current_number = settings.startFrom;
        settings.target.html(current_number);

        checkNumber();
        var timer;
        function checkNumber(){
            if(offset<0){
                if(current_number <= settings.countTo)
                {
                    current_number = settings.counTo;
                    clearTimeout(timer);
                    if (typeof settings.callback == 'function') { // make sure the callback is a function
                        settings.callback.call($this); // brings the scope to the callback
                    }
                }
                else
                {
                    current_number += offset;
                    timer=setTimeout(function(){checkNumber()},settings.frequency);
                }
            }else{
                if(current_number >= settings.countTo)
                {
                    current_number = settings.counTo;
                    clearTimeout(timer);
                    if (typeof settings.callback == 'function') { // make sure the callback is a function
                        settings.callback.call($this); // brings the scope to the callback
                    }
                }
                else
                {
                    current_number += offset;
                    timer=setTimeout(function(){checkNumber()},settings.frequency);
                }
            }
            settings.target.html(current_number);
            if(settings.log){console.log(settings.target.attr('id'))};
        }   

    }else{
       if(settings.log){console.log('From countUp: Please use an integer for startFrom and countTo arguments.');}
    }
};
})( jQuery );
于 2013-04-08T20:25:10.230 に答える