Question

我正在尝试构建一个基于JavaScript的布局网格生成器，我希望通过输入字段的值来控制网格行的数量。例如。如果我输入12，我的容器 - div应该有12个div。我已经创建了一个可以处理这个问题的函数......

document.getElementById('numofrows').onkeyup=function(){
    var foo = [];
    for (var i=0; i<this.value ;i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

...但它的缺点是，我所做的每一次输入都会再添加一些div。如何将子div的总数限制为输入字段的实际值？

Answer 1

如果要使其成为动态的，每次执行该函数时，只需清除容器div并添加与输入值对应的div数。像这样：

document.getElementById('numofrows').onkeyup=function(){
    document.getElementById('container').innerHTML='';
    var foo = [];
    for (var i=0; i<this.value ;i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

否则一个简单的if else块对你来说应该没问题。

Answer 2

var maxNumber = this.value;
for (var i=0; i<maxNumber;i++)

只需检查值之前的值而不是每一步

Answer 3

这不是解决问题的最佳方法，但是。

if('div'.Count >= MaxNumber){
    Do Not Add Child.
}else{
    Add Child.    
}

Answer 4

您可以先清除子div，然后添加新列表;像：

document.getElementById('numofrows').onkeyup = function () {
    var foo = [];

    // remove all the children of the parent element container
    while (container.firstChild) container.removeChild(container.firstChild);

    for (var i = 0; i < this.value; i++) {
        foo[i] = document.createElement('div');
        container.appendChild(foo[i]);

    }
}

演示：http://jsfiddle.net/IrvinDominin/56VeH/

按输入字段的值控制HTML元素的数量

4 个答案: