如何通过JavaScript根据日期值为页面元素添加类？

我尝试根据今日日期值匹配JSON中的数据，为页面元素添加类。JSON中的日期格式示例：

tanggal: "Sunday, 20/08/2023"

我的JavaScript代码如下：

function fetchJadwal() {
  const showli = document.getElementById('showData');
  const d = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  const date = new Date();
  
  let day = date.getDate();
  let month = date.getMonth() + 1;
  let year = date.getFullYear();
  let valuedate = d[date.getDay() - 1] + ', ' + day + '/' + month + '/' + year;
  
  let col = [];
  for (var i = 0; i < jadwal.length; i++) {
    var obj = jadwal[i];
    var objTgl = jadwal[i].tanggal;
    // objTgl = Sunday, 20/08/2023
    var classActive = (attrbDate == objTgl) ? "active" : "";
    col += `<li value='${objTgl}' class='${classActive}'></li>`;
  }
  showli.innerHTML = col;
}

fetchJadwal()

这段代码无法正常工作，但将valuedate改为硬编码值valuedate = 'Sunday, 20/12/2023';时，代码就能正常运行。

问题原因及修复方案 #

1. 数组索引错误

date.getDay()返回值范围是0（周日）到6（周六），但数组d第一个元素是Monday，导致周日时date.getDay() -1等于-1，取到undefined，生成的日期字符串格式错误。

修复：调整数组顺序，让索引直接对应getDay()的返回值：

const d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// 直接用date.getDay()作为索引，无需减1
let valuedate = d[date.getDay()] + ', ' + ...;

2. 日期/月份未补零

JSON中的日期是两位格式（如08），但动态生成的day和month如果是个位数，会变成8，导致格式不匹配。

修复：添加补零函数处理日期和月份：

function padZero(num) {
  return num.toString().padStart(2, '0');
}

// 生成日期时调用补零
let day = padZero(date.getDate());
let month = padZero(date.getMonth() + 1);

3. 变量名笔误

代码中判断条件用了attrbDate，但实际定义的变量是valuedate，导致判断永远为false，无法添加active类。

修复：修正变量名：

var classActive = (valuedate == objTgl) ? "active" : "";

修复后的完整代码 #

function padZero(num) {
  return num.toString().padStart(2, '0');
}

function fetchJadwal() {
  const showli = document.getElementById('showData');
  const d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const date = new Date();
  
  let day = padZero(date.getDate());
  let month = padZero(date.getMonth() + 1);
  let year = date.getFullYear();
  let valuedate = `${d[date.getDay()]}, ${day}/${month}/${year}`;
  
  let col = [];
  for (var i = 0; i < jadwal.length; i++) {
    var objTgl = jadwal[i].tanggal;
    var classActive = valuedate === objTgl ? "active" : "";
    col += `<li value='${objTgl}' class='${classActive}'></li>`;
  }
  showli.innerHTML = col;
}

fetchJadwal()

内容的提问来源于stack exchange，提问作者Muhamad Sahrudin