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

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

让我们来看看代码：

// 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。谢谢:)

来源

2014-09-30 Orphal

您发布的代码中的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); 
    } 
}

来源

2014-09-30 00:45:01

完美的作品，谢谢:) – Orphal 2014-09-30 00:48:59

@Orphal。不用谢：） – 2014-09-30 00:49:22

为什么你想变量有该项目的号码？您可以运行for语句中的所有代码，并且变量名称不必更改。

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

来源

2014-09-30 00:22:12

谢谢。它是否可以干扰我已经在函数内部使用的'i'？例如在第7行（for（var i = 0; i Orphal 2014-09-30 00:31:03

让我把最后的代码放在另一个答案 – 2014-09-30 00:37:29

是的请，因为我很努力去理解如何得到最终结果。谢谢你的帮助。 – Orphal 2014-09-30 00:38:56

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

回答

相关问题