javascript - 如果微调器为空白，则微调器显示的数字不正确

Question

我有 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;

Answer 1

问题是您的 lastSpin 变量，实际上，您的 cleanSpin() 函数都在全局范围内，因此在所有 Spinner 实例之间共享。

相反，您应该尝试将 cleanSpin 方法或其变体添加到 Spinner“类”中，以便它成为 Spinner 实例的本地.

编辑:这是完整的 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);
}