Question

我有一段慷慨的代码和几个if ... else语句，我需要将它转换成循环。问题是，每次进行循环时，函数必须有一些不同的id才能正常工作。

让我们来看看代码：

// Count how many inputs there are in element with id "tempResult"
var inputCount = document.getElementById('tempResult').getElementsByTagName('input').length;


if (inputCount == 1)  // if there is 1 input, generate 1 line
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }
}
else if (inputCount == 2) // if there are 2 inputs, generate 2 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }
}
else if (inputCount == 3) // if there are 3 inputs, generate 3 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }


  var str = document.getElementById('tempString3').value;
  var arrayOfStrings3 = str.split('*');
  for(var i = 0; i < arrayOfStrings3.length; i++)
  {
    var div3 = document.getElementById('div3');
    var mi3 = document.createElement('input');
    mi3.setAttribute('type', 'text');
    mi3.setAttribute('size', '5');
    mi3.setAttribute('id', 'string3' + (i+1));
    mi3.setAttribute('value', arrayOfStrings3[i]);
    div3.appendChild(mi3);
  }
}
else if (inputCount == 4) // if there are 4 inputs, generate 4 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }


  var str = document.getElementById('tempString3').value;
  var arrayOfStrings3 = str.split('*');
  for(var i = 0; i < arrayOfStrings3.length; i++)
  {
    var div3 = document.getElementById('div3');
    var mi3 = document.createElement('input');
    mi3.setAttribute('type', 'text');
    mi3.setAttribute('size', '5');
    mi3.setAttribute('id', 'string3' + (i+1));
    mi3.setAttribute('value', arrayOfStrings3[i]);
    div3.appendChild(mi3);
  }


  var str = document.getElementById('tempString4').value;
  var arrayOfStrings4 = str.split('*');
  for(var i = 0; i < arrayOfStrings4.length; i++)
  {
    var div4 = document.getElementById('div4');
    var mi4 = document.createElement('input');
    mi4.setAttribute('type', 'text');
    mi4.setAttribute('size', '5');
    mi4.setAttribute('id', 'string4' + (i+1));
    mi4.setAttribute('value', arrayOfStrings4[i]);
    div4.appendChild(mi4);
  }
}

正如您所看到的，我们会根据我们在div tempResult中输入的内容重复相同功能的一定时间：

var str = document.getElementById('tempStringX').value;
  var arrayOfStringsX = str.split('*');
  for(var i = 0; i < arrayOfStringsX.length; i++)
  {
    var divX = document.getElementById('divX');
    var miX = document.createElement('input');
    miX.setAttribute('type', 'text');
    miX.setAttribute('size', '5');
    miX.setAttribute('id', 'stringX' + (i+1));
    miX.setAttribute('value', arrayOfStringsX[i]);
    divX.appendChild(miX);
  }

X，每次都被数字替换，很重要，如果没有它，函数将无法正常工作（divX除外，我可以在同一个div中生成输入，但无论如何）。上面的代码工作正常。

我尝试做的是使用for()代替if...else()，这样我每次添加新代码时都不需要手动编辑代码DIV。我对for()并不十分熟悉，并且我在代码中尝试使用已存在的模型，因为模型不成功。

以下是HTML的外观：

<div id="tempResult">
    <input type="text" id="tempString1" value="valueTempString1" />
    <input type="text" id="tempString2" value="valueTempString2" />
    <input type="text" id="tempString3" value="valueTempString3" />
    <input type="text" id="tempString4" value="valueTempString4" />
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

如果你想知道整个代码在做什么，explanation's here。谢谢:)）

Answer 1

您发布的代码中的if循环将用作for循环。即，您将按输入计数的相同次数进行迭代。所以你可以将相同的代码压缩成这个。

var inputCount = document.getElementById('tempResult')
                         .getElementsByTagName('input').length;

// First loop that iterates over the input count
for (var j = 1; j <= inputCount; j++) {
    var str = document.getElementById('tempString' + j).value,
        arrayOfStrings = str.split('*');
    // Second loop would iterate over the strings that would be split
    for (var i = 0; i < arrayOfStrings.length; i++) {
        var div = document.getElementById('div' + j);
        var mi = document.createElement('input');
        mi.setAttribute('type', 'text');
        mi.setAttribute('size', '5');
        mi.setAttribute('id', 'string' + j + '-' + (i + 1));
        mi.setAttribute('value', arrayOfStrings[i]);
        div.appendChild(mi);
    }
}

Answer 2

为什么您希望变量包含项目编号？您可以在for语句中运行所有代码，变量名称也不必更改。

thisdiv = document.getElementById('div'+i);
thisdiv....all changes to thisdiv go here

将if ... else语句转换为for循环

2 个答案: