Question

我知道有DRY原则，我想了解在这种情况下使用它的最佳方法是什么：

我正在做一个项目，我必须根据一天（天数不一致）为每个原始颜色着色。但关于td＆＃39; s：在每个原始中有3个td。我拿了td元素并手动编写了if，并且每次都将td添加到td的数组中。什么是接近它的最佳方式？

我的代码：

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");

循环通过td

2 个答案: