javascript - 循环 td

Question

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

我正在做一个元素，我必须根据一天(这些天不一致)为 td 的每个原始图像着色。但关于 td 的:在每个原始文件中有 3 个 td。我拿了 td 元素并手动编写了 if's 并且每次都将 3 添加到 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")
}