有沒有更有效的方式來編寫此代碼？
[英]Is there a more efficient way to write this?
問題描述
只是在我的老師想出的一個學校項目上工作，該項目應該是用偽代碼編寫的，但是我將其進一步發展並用javascript / html編寫，以創建一個功能正常的網站。 基本上，有一所假設的學校有9個年級，每個年級3個教室，每個班9個月。 我應該寫一個偽代碼腳本來說明如何為每個教室生成賬單-幼兒園是每月80美元，其余的班級是8年級之前每月60美元。
無論如何，我很好奇是否有更好的方法來編寫此代碼並列出每個月的賬單-講師編寫代碼的方式，我不得不用27次編寫（每個教室3次乘以9年級），幼兒園每月80美元，其余課程每月60美元。 這是我到目前為止的內容：
<body>
<script>
var x = 0;
var y = 1;
var i;
var theMonths = ["January", "February", "March", "April", "May",
"June", "July", "August", "September"];
function javascript() {
for (i = 0; i < 10; i++) {
document.getElementById("td1").innerHTML += theMonths[0];
document.getElementById("td2").innerHTML += theMonths[1];
document.getElementById("td3").innerHTML += theMonths[3];
document.getElementById("td4").innerHTML += theMonths[4];
document.getElementById("td5").innerHTML += theMonths[5];
document.getElementById("td6").innerHTML += theMonths[6];
document.getElementById("td7").innerHTML += theMonths[7];
document.getElementById("td8").innerHTML += theMonths[8];
document.getElementById("td1a").innerHTML += "$60";
document.getElementById("td2a").innerHTML += "$60";
document.getElementById("td3a").innerHTML += "$60";
document.getElementById("td4a").innerHTML += "$60";
document.getElementById("td5a").innerHTML += "$60";
document.getElementById("td6a").innerHTML += "$60";
document.getElementById("td7a").innerHTML += "$60";
document.getElementById("td8a").innerHTML += "$60";
return false;
}
}
</script>
<div id="demoDiv">
<p id="demo">Your coupons:</p>
<table>
<tr>
<th scope="col">Month:</th>
<th scope="col">Price:</th>
</tr>
<tr>
<td id="td1"></td>
<td id="td1a"></td>
</tr>
<tr>
<td id="td2"></td>
<td id="td2a"></td>
</tr>
<tr>
<td id="td3"></td>
<td id="td3a"></td>
</tr>
<tr>
<td id="td4"></td>
<td id="td4a"></td>
</tr>
<tr>
<td id="td5"></td>
<td id="td5a"></td>
</tr>
<tr>
<td id="td6"></td>
<td id="td6a"></td>
</tr>
<tr>
<td id="td7"></td>
<td id="td7a"></td>
</tr>
<tr>
<td id="td8"></td>
<td id="td8a"></td>
</tr>
</table>
</div>
<input type="button" value="Go!" onclick="javascript();" />
</body>
有沒有一種方法可以簡化此過程，所以我不必將所有內容復制/粘貼27次並為td項目制作27個具有不同ID的單獨表？
如果您能為我解決這個問題-您真棒：D
2 個解決方案
解決方案1
4 已采納 2015-10-19 03:42:20
您可以使用for如下填充在表中的數據
- 完全不使用變量
x和y，將其刪除 - 刪除
return false;從for這是造成循環運行一次，然后從函數返回控制 - 使用循環變量
i從數組中獲取元素和相應元素的動態順序ID - 已從
innerHTML刪除+=以防止在單擊按鈕時添加重復數據 - 使用硬編碼值8遍歷所有元素，應該是動態的並且等於數組的長度。
var theMonths = ["January", "February", "March", "April", "May",
"June", "July", "August", "September"];
function javascript() {
for (var i = 0; i < 8; i++) {
document.getElementById("td" + (i + 1)).innerHTML = theMonths[i];
document.getElementById("td" + (i + 1) + "a").innerHTML = "$60";
}
}
解決方案2
2 2015-10-19 04:01:45
我並沒有真正應該做的事情，所以我只解決您實際正在做的事情。 在沒有其他輸入的情況下，我看不到按鈕的指向，因此我只是將腳本移至要修改的DOM元素下方，並生成了重復的列。
<body>
<div>
<p> Your coupons: </p>
<table>
<tbody id=demoTable>
<tr>
<th scope="col"> Month: </th>
<th scope="col"> Price: </th>
</tr>
</tbody>
</table>
</div>
<script>
(function() {
function td(text) {
var column = document.createElement('td')
column.textContent = text
return column
}
var table = document.getElementById('demoTable'),
months =
[ "January", "February", "March", "April", "May",
"June", "July", "August", "September" ]
months.forEach(function(month) {
var row = document.createElement('tr')
row.appendChild(td(month))
row.appendChild(td('$60'))
table.appendChild(row)
})
})()
</script>
</body>
有沒有更有效的方法來編寫這個涉及 FontAwesome 圖標的 function？
[英]Is there a more efficient way to write this function involving FontAwesome icons?
而不是重復代碼塊，而是編寫此javascript的更有效方法？
[英]Instead of repeating blocks of code, more efficient way to write this javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.