[英]Reduce JavaScript iteration
現在,我正在使用javascript開發時間軸程序。 當我單擊每個班級時,由於每個班級均為2小時課程,因此應將其着色為帶有2個塊的時間軸。
每個時間軸表都有id(例如,星期一的第一堂課有=“ mon1”,而生日的第二堂課有'fri2'
這是我的代碼。 而且效果很好。 但我想知道如何減少代碼。
let timelineColor = getRamdomColor();
let clickDay;
let clickDay1;
for (i = 0; i < dayArray.length; i++) {
if (dayArray[i] === 'monday') {
clickDay = 'mon' + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = 'mon' + (Number(timeArray[i]) + 1);
console.log(clickDay1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
} else if (dayArray[i] === 'tuesday') {
clickDay = 'tue' + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = 'tue' + (Number(timeArray[i]) + 1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
} else if (dayArray[i] === 'wednesday') {
clickDay = 'wed' + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = 'wed' + (Number(timeArray[i]) + 1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
} else if (dayArray[i] === 'thursday') {
clickDay = 'tur' + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = 'tur' + (Number(timeArray[i]) + 1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
} else if (dayArray[i] === 'friday') {
clickDay = 'fri' + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = 'fri' + (Number(timeArray[i]) + 1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
}
}
您實際上根本不需要if
語句。 設置一個將您的全天名稱與短日名稱相關聯的地圖,然后進行查找:
let timelineColor = getRamdomColor();
let clickDay;
let clickDay1;
var dayMap = {
'monday' : 'mon',
'tuesday' : 'tue',
'wednesday': 'wed',
'thursday' : 'tur',
'friday' : 'fri'
};
for (var i = 0; i < dayArray.length; i++) {
let shortDayName = dayMap[dayArray[i]];
clickDay = shortDayName + timeArray[i];
let table = document.getElementById(clickDay);
table.style.backgroundColor = timelineColor;
clickDay1 = shortDayName + (Number(timeArray[i]) + 1);
console.log(clickDay1);
let table1 = document.getElementById(clickDay1);
table1.style.backgroundColor = timelineColor;
}
您可以使用switch
語句而不是多個if-elseif
語句:
let timelineColor = getRamdomColor();
for (i = 0; i < dayArray.length; i++){
let day;
switch (dayArray[i]){
case 'monday': day = 'mon'; break;
case 'tuesday': day = 'tue'; break;
case 'wednesday': day = 'wed'; break;
case 'thursday': day = 'tur'; break;
case 'friday': day = 'fri'; break;
}
// I moved these variables into the loop too
let clickDay = day + timeArray[i];
let clickDay1 = day + (Number(timeArray[i]) + 1);
let table = document.getElementById(clickDay);
let table1 = document.getElementById(clickDay1);
table.style.backgroundColor = timelineColor;
table1.style.backgroundColor = timelineColor;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.