將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循環

回答

相關問題