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);
}

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

1 个答案: