2个盒子,2个动态最大值在设置时更改

时间:2011-06-22 08:07:24

标签: php javascript

我有这个代码为两个文本框设置动态最大值:

var length = document.getElementById('firstBox'),
    width = document.getElementById('secondBox');
    max1 = 100;
    min1 = 20;
    max2 = 200;
    min2 = 10;

length.onchange = function() {
    var maxValue, minValue;

    if (width.value < max1) {
        maxValue = max2;
        minValue = (width.value < min1) ? min1 : min2;
    } else {
        maxValue = max1;
        minValue = min1;
    }
    if (this.value > maxValue) {
        this.value = maxValue;
    }
    if (this.value < minValue) {
        this.value = minValue;
    }
};

width.onchange = function() {
    var maxValue, minValue;

    if (length.value < max1) {
        maxValue = max2;
        minValue = (length.value < min1) ? min1 : min2;
    } else {
        maxValue = max1;
        minValue = min1;
    }
    if (this.value > maxValue) {
        this.value = maxValue;
    }
    if (this.value < minValue) {
        this.value = minValue;
    }
};

效果非常好,只有当客户输入的值高于该框中最低的最大值(max1)时,我才希望将最大值(max2)切换到另一个框。

假设客户在第一个框中键入“150”,然后该框自动被分配max2“200” - 但我想要的是,如果客户在第二个框中输入“150”或任何高于max1的值那么那应该成为max2,这意味着第一个盒子将从它的“150”降低到“100”,就像max1一样。反之亦然。

希望这是可以理解的,否则请告诉我,我会尝试更好地解释它。

1 个答案:

答案 0 :(得分:0)

这个想法不是将变量firstboxsecondbox保存到符合max1 max1box的框和符合max2的框,max2box。 }。

如果逻辑指示切换最大值,则只需切换指针。

var max1box = document.getElementById('length'),
    max2box = document.getElementById('width');
    max1 = 100;
    min1 = 20;
    max2 = 200;
    min2 = 10;

max1box.addEventListener('change',validateValues);
max2box.addEventListener('change',validateValues);

function validateValues() {

    if (this == max1box && this.value > max1 && this.value > max2box.value)
    {
       max1box = max2box; 
       max2box = this;  
    } 

    if (max1box .value > max1) {
        max1box .value = max1;
    }
    if (max1box .value < min1) {
        max1box .value = min1;
    }        

    if (max2box.value > max2) {
        max2box.value = max2;
    }
    if (max2box.value < min2) {
        max2box.value = min2;
    }
   }

您可以在此处看到它:http://jsfiddle.net/Hm2Qn/1/

何时切换规则可能不完全符合您的要求,但您可以从此处获取。