如何高亮DOM中匹配的月份列表项并禁用未匹配项？

核心思路 #

先收集页面中实际存在的月份（从带data-filter属性的元素里提取），再遍历月份列表，对匹配项高亮，非匹配项设置禁用状态。

实现步骤与代码 #

1. 定义样式（CSS）

先写好高亮和禁用的视觉样式：

/* 高亮样式：突出显示匹配项 */
.highlight {
  background-color: #ffeb3b;
  font-weight: bold;
}

/* 禁用样式：灰化+阻止交互 */
.disabled {
  color: #999;
  pointer-events: none;
  cursor: not-allowed;
}

2. JavaScript逻辑实现

通过JS动态处理列表项的状态：

// 1. 收集所有存在的月份值，用Set存储提升查找效率
const existingMonths = new Set(
  Array.from(document.querySelectorAll('[data-filter]'))
    .map(el => el.dataset.filter.trim())
);

// 2. 获取月份列表的所有li元素
const monthListItems = document.querySelectorAll('ul li');

// 3. 遍历处理每个列表项
monthListItems.forEach(li => {
  const monthText = li.textContent.trim();
  if (existingMonths.has(monthText)) {
    // 匹配到存在的月份，添加高亮类
    li.classList.add('highlight');
  } else {
    // 无匹配项，添加禁用类
    li.classList.add('disabled');
  }
});

3. 效果说明

• 页面中存在data-filter="February"和data-filter="April"的元素，因此列表里的February和April会被高亮显示。
• 其余月份会被灰化，且无法触发点击事件（如果列表项绑定了点击逻辑）。

扩展优化 #

如果需要支持页面DOM动态更新后重新处理列表，可以把逻辑封装成函数，按需调用：

function updateMonthListStatus() {
  const existingMonths = new Set(
    Array.from(document.querySelectorAll('[data-filter]'))
      .map(el => el.dataset.filter.trim())
  );
  const monthListItems = document.querySelectorAll('ul li');
  
  monthListItems.forEach(li => {
    const monthText = li.textContent.trim();
    // 用toggle方法自动添加/移除类
    li.classList.toggle('highlight', existingMonths.has(monthText));
    li.classList.toggle('disabled', !existingMonths.has(monthText));
  });
}

// 初始化调用
updateMonthListStatus();

// 后续DOM变化后可再次调用更新状态
// updateMonthListStatus();

内容的提问来源于stack exchange，提问作者0x02