0

我有一个 javascript 函数，可以创建用于上传图像的输入字段。

我有这个代码：

<script type="text/javascript">
    function add_input(){ 
        var wo = document.getElementById('wo');
        var li = document.createElement('li');

        var input = document.createElement('input');
        input.type = 'file';
        input.name = 'image[]';

    li.appendChild(input);     
    li.appendChild(document.createTextNode(' '));

    var button=document.createElement('input');
        button.type = 'button';
        button.className = 'button small';
        button.onclick=function(){delete_input(this);};
        button.value = 'delete';

    li.appendChild(button);
    wo.appendChild(li);
    }

    function delete_input(feld){ 
    feld.parentNode.parentNode.removeChild(feld.parentNode);
    }
</script>

现在我的问题是我想创建最多 10 个输入字段。我以前从未使用过javascript，也不知道如何限制它。

如果有人能告诉我如何意识到我真的很感激。多谢。

4

3 回答 3

3

修改您的脚本，使其具有：

<script type="text/javascript">

    var max = 10;
    var current = 0;

    function add_input(){ 
        if(current < max){
            current++;
            //...do everything in here for append
        }
    }

    function delete_input(feld){ 
        if(current > 0){
            current--;
            feld.parentNode.parentNode.removeChild(feld.parentNode);
        }
    }
</script>
于 2012-04-12T08:51:52.740 回答
0

在函数的开头，计算已经存在的项目数量，如果有 10 个则离开。我在这里使用“li”进行了计算，但您可以计算其他任何合适的值：

<script type="text/javascript">
function add_input(){
    var wo = document.getElementById('wo');
    var objList  = wo.getElementsByTagName('li');
    var soFar = objList.length;
    if (soFar > 9) {
        alert ("yikes");
        return;
    }
    var li = document.createElement('li');

    var input = document.createElement('input');
于 2012-04-12T09:01:56.320 回答
0

最好根据您给出的代码定义一个全局计数器，这里是修改：

<script type="text/javascript">
var counter = 0;

function add_input(){ 
  if (counter >= 10) 
  return false;
  var wo = document.getElementById('wo');
  var li = document.createElement('li');

  var input = document.createElement('input');
  input.type = 'file';
  input.name = 'image[]';

  li.appendChild(input);     
  li.appendChild(document.createTextNode(' '));

  var button=document.createElement('input');
  button.type = 'button';
  button.className = 'button small';
  button.onclick=function(){delete_input(this);};
  button.value = 'delete';

  li.appendChild(button);
  wo.appendChild(li);
  counter ++;
}

function delete_input(feld){ 
  feld.parentNode.parentNode.removeChild(feld.parentNode);
  counter --;
}

</script>
于 2012-04-12T09:09:52.450 回答