Spinner не отображает правильное число, если счетчик пуст - PullRequest
2 голосов
/ 21 ноября 2011

У меня есть 5 блесен, которые почти работают отлично, есть только один маленький глюк, который я не могу преодолеть.

Что должно произойти, так это то, что, если счетчик пуст, независимо от того, какое предыдущее число было в ТА, он отобразит это предыдущее число.

Вместо этого он делает то, что делаетчисло, которое было введено в ЛЮБОМ из 5 счетчиков, отображает это число в пустом счетчике.

Так как я могу получить его, чтобы отображалось предыдущее число из этого счетчика, если счетчик пуст, а неотображение последнего предыдущего числа, введенного с любого счетчика в пустом счетчике?

Ниже приведен мой код счетчика:

     function Spinner(elem,min, max){
 this.elem = elem;
 this.elem.value = min;
 this.min = min;
 this.max = max;
 this.timer;
 this.speed = 150; //milliseconds between scroll values
 var selfO = this;

 this.elem.onkeyup = function(){
    var regex = /^[0-9]*$/;
    if(!regex.test(selfO.elem.value)){
    selfO.elem.value = selfO.elem.value.substring(0,selfO.elem.value.length-1);
                            return;
                        }
                        selfO.validateValue();
                    }

      this.validateValue = function(){
      if(Number(selfO.elem.value) > selfO.max) {selfO.elem.value = selfO.max;}
      if(Number(selfO.elem.value) < selfO.min) {selfO.elem.value = selfO.min;}
                    }

                    this.stopSpinning = function(){
                        clearTimeout(selfO.timer);
                    }

                    this.spinValue = function(dir){
                        selfO.elem.value = Number(selfO.elem.value) + dir;
                        selfO.validateValue();
                        selfO.timer = setTimeout(function(){selfO.spinValue(dir);},selfO.speed);
                    }

                };

           window.onload=function(){
                        //create the Spinner objects
                        var SpinnerHours = new Spinner(document.getElementById('txtHours'),0,23);                
                        var SpinnerMins = new Spinner(document.getElementById('txtMins'),0,59);
                        var SpinnerSecs = new Spinner(document.getElementById('txtSecs'),0,59);
                        var SpinnerWeight = new Spinner(document.getElementById('txtWeight'),0,100);
                        var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'),0,100);

                        document.getElementById('txtHours').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtMins').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtSecs').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtWeight').onblur = function(){ this.value = cleanSpin(this.value);}
                        document.getElementById('txtQuestion').onblur = function(){ this.value = cleanSpin(this.value);}

            function cleanSpin(obj) {
                if(obj > 0) {
                    var str = obj.replace(/^0*/,'');
                    lastSpin = str;
                    return str;
                }
                else {
                    return lastSpin;
                }
            }

            var lastSpin = 1;

1 Ответ

1 голос
/ 21 ноября 2011

Проблема в том, что ваша переменная lastSpin и ваша функция cleanSpin() находятся в глобальной области видимости и, таким образом, совместно используются всеми экземплярами Spinner.

Вместо этого вам следует попробовать добавить *Метод 1005 * или его вариант для Spinner "класса", так что он становится локальным для этого экземпляра Spinner.

EDIT: Вот полный Javascript дляпроиллюстрируйте, что я имел в виду.Я не проверял это вообще, так как у меня нет остальной части кода, необходимого для этого, но, надеюсь, вы увидите, что я изменил:

function Spinner(elem, min, max) {
    this.elem = elem;
    this.elem.value = min;
    this.min = min;
    this.max = max;
    this.timer;
    this.speed = 150; //milliseconds between scroll values
    this.lastSpin = 1; // added lastSpin as a property of the Spinner
    var selfO = this;

    this.elem.onkeyup = function() {
        var regex = /^[0-9]*$/;
        if (!regex.test(selfO.elem.value)) {
            selfO.elem.value = selfO.elem.value.substring(0, selfO.elem.value.length - 1);
            return;
        }
        selfO.validateValue();
    }

    // I have added the onblur function inside the Spinner "class"
    this.elem.onblur = function() {
        if (self0.elem.value > 0) {
            var str = self0.elem.value.replace(/^0*/, '');
            self0.lastSpin = str;
            self0.elem.value = str;
        }
        else {
            self0.elem.value = lastSpin;
        }
    };

    this.validateValue = function() {
        if (Number(selfO.elem.value) > selfO.max) {
            selfO.elem.value = selfO.max;
        }
        if (Number(selfO.elem.value) < selfO.min) {
            selfO.elem.value = selfO.min;
        }
    };

    this.stopSpinning = function() {
        clearTimeout(selfO.timer);
    };

    this.spinValue = function(dir) {
        selfO.elem.value = Number(selfO.elem.value) + dir;
        selfO.validateValue();
        selfO.timer = setTimeout(function() {
            selfO.spinValue(dir);
        }, selfO.speed);
    };

};

window.onload = function() {
    //create the Spinner objects
    var SpinnerHours = new Spinner(document.getElementById('txtHours'), 0, 23);
    var SpinnerMins = new Spinner(document.getElementById('txtMins'), 0, 59);
    var SpinnerSecs = new Spinner(document.getElementById('txtSecs'), 0, 59);
    var SpinnerWeight = new Spinner(document.getElementById('txtWeight'), 0, 100);
    var SpinnerQuestion = new Spinner(document.getElementById('txtQuestion'), 0, 100);
}
...