jQuery实现：检测两个<span>值相同时为父<div>添加样式类

没问题，这个需求其实有两种靠谱的实现方式，取决于你能不能控制修改那两个数值的代码——我给你详细拆解：

方式一：自己控制数值更新（推荐，更高效） #

如果修改pending和done数值的代码是你自己写的，那完全不用监听DOM变化，直接封装一个更新函数，每次更新后自动检查数值并修改样式就行：

第一步：写CSS样式 #

先定义好绿色背景的类：

.completed-bg {
  background-color: #d4edda; /* 柔和的浅绿色，你可以根据需求调整色调 */
}

第二步：封装更新与检查逻辑 #

// 封装更新数值的函数，每次改数值都调用这个
function updateItemStatus(itemId, pendingValue, doneValue) {
  // 找到对应的item容器和两个span
  const itemDiv = document.getElementById(itemId);
  const pendingSpan = itemDiv.querySelector('.pending');
  const doneSpan = itemDiv.querySelector('.done');

  // 更新span里的数值
  pendingSpan.textContent = pendingValue;
  doneSpan.textContent = doneValue;

  // 检查数值并修改样式
  checkItemCompletion(itemDiv, pendingValue, doneValue);
}

// 专门负责检查数值并切换类的工具函数
function checkItemCompletion(itemDiv, pending, done) {
  // 一定要转成数字再比较，避免字符串"5"和5不相等的坑
  if (Number(pending) === Number(done)) {
    itemDiv.classList.add('completed-bg');
  } else {
    itemDiv.classList.remove('completed-bg');
  }
}

之后你每次要修改某个item的数值时，直接调用updateItemStatus("item-123", 3, 3)就行，不用手动去改span的文本，样式会自动同步。

方式二：监听所有可能的文本变化（兼容第三方修改） #

如果修改数值的代码不是你控制的（比如其他组件、第三方脚本），那可以用MutationObserver来监听span的文本变化，不管谁改的数值，都能触发样式更新：

第一步：同样先准备CSS样式 #

和方式一的CSS一样，定义completed-bg类。

第二步：用MutationObserver监听变化 #

// 给单个item初始化监听
function setupItemObserver(itemId) {
  const itemDiv = document.getElementById(itemId);
  const pendingSpan = itemDiv.querySelector('.pending');
  const doneSpan = itemDiv.querySelector('.done');

  // 创建观察者实例，数值变化时触发检查
  const observer = new MutationObserver(() => {
    const pendingNum = Number(pendingSpan.textContent);
    const doneNum = Number(doneSpan.textContent);
    if (pendingNum === doneNum) {
      itemDiv.classList.add('completed-bg');
    } else {
      itemDiv.classList.remove('completed-bg');
    }
  });

  // 配置观察选项：监听文本内容的变化
  const observeConfig = { characterData: true, subtree: true };

  // 启动对两个span的观察
  observer.observe(pendingSpan, observeConfig);
  observer.observe(doneSpan, observeConfig);

  // 页面加载时先检查一次，避免初始数值相等但没加样式
  checkItemCompletion(itemDiv, pendingSpan.textContent, doneSpan.textContent);
}

// 批量给所有item初始化监听
function setupAllItemObservers() {
  // 这里的选择器要根据你的实际HTML结构调整，比如所有id包含item的div
  const allItemDivs = document.querySelectorAll('div[id^="item-"]');
  allItemDivs.forEach(div => setupItemObserver(div.id));
}

// 页面加载完成后启动监听
document.addEventListener('DOMContentLoaded', setupAllItemObservers);

// 复用方式一里的检查函数
function checkItemCompletion(itemDiv, pending, done) {
  if (Number(pending) === Number(done)) {
    itemDiv.classList.add('completed-bg');
  } else {
    itemDiv.classList.remove('completed-bg');
  }
}

额外注意点 #

• 确保你的两个span有明确的类名（比如.pending和.done），这样用选择器能精准找到它们
• 如果是动态添加的item（比如通过AJAX加载的），要在item被添加到DOM后，再调用setupItemObserver给它初始化监听
• 一定要把文本转成数字再比较，不然字符串"10"和数字10会被判定为不相等

内容的提问来源于stack exchange，提问作者M.E.