私はDRY原則があることを知っていると私はこのケースでは、それを使用するための最良の方法であるかを理解したいと思いTD

Question

をループ：

イムiはTDのそれぞれの生を色付けする必要があるプロジェクトをやって1日に応じて（日は一貫していません）。 しかし、それぞれの生のtdの： には3つのtdがあります。 私はtd要素を取って、手作業で書いたときにtdの配列に3を加えました。 これにアプローチするにはどうすればよいでしょうか？

マイコード：

var date = new Date(); 
var day = date.getDate(); 
var month = date.getMonth(); 
var td = document.getElementsByTagName("td"); 

if (day === 4 && month === 5) { 
    td[3].style.background = "yellow"; 
    td[3].style.color = "black"; 
} else if (day === 6 && month === 5) { 
    td[6].style.background = "yellow"; 
    td[6].style.color = "black"; 
} else if (day === 8 && month === 5) { 
    td[9].style.background = "yellow"; 
    td[9].style.color = "black"; 
} else if (day === 13 && month === 4) { 
    td[12].style.background = "yellow"; 
    td[12].style.color = "black"; 
} 

Answer 1

私は再書き込みの少量を節約する代わりにクラスを適用すると思います。

CSS

.highlighted{ 
    background: yellow; 
    color: black; 
} 

Javascriptを

if (day === 4 && month === 5) { 
    td[3].classList.add("highlighted") 
} 
else if(day === 6 && month === 5) { 
    td[6].classList.add("highlighted") 
} 
else if(day === 8 && month === 5) { 
    td[9].classList.add("highlighted") 
} 
else if(day === 13 && month === 4) { 
    td[12].classList.add("highlighted") 
} 

日とインデックスの間に関係がある場合は、何かのように、あなたのjavascriptをダウンさせることができ...

if ((day === 4 && month === 5) || (day === 6 && month === 5) || (day === 8 && month === 5) || (day === 13 && month === 4) { 
    td[day].classList.add("highlighted") 
} 

Answer 2

試用：

//var days = []; 
//days['5/4']=3, days['5/6']=6, days['5/8']=9, days['4/13']=12; 
var days={'5/4': 3, '5/6': 6, '5/8': 9, '4/13': 12}; //this is more elegant, thanks to @Rick 
var date = new Date(); 
var day = date.getDate(); 
var month = date.getMonth(); 
var td = document.getElementsByTagName("td"); 
if(!!days[month + '/' + day]) //true if exist 
    td[days[month + '/' + day]].classList.add("highlighted");