动态生成卡片内select选中EXP选项无法修改对应th元素类问题求助

问题原因与解决方案 #

常见失效原因

• 循环生成卡片时给不同卡片内的th设置了重复id：id为全局唯一属性，重复id会导致getElementById/querySelector永远匹配到页面第一个符合的元素，无法命中当前卡片的目标th。
• 元素查找路径错误：next只能匹配同层级相邻兄弟元素，closest仅向上查找祖先元素，你之前的方法没有先定位到当前卡片的根容器就直接查找th，自然匹配不到目标元素。

正确实现代码

你可以基于当前触发事件的select向上定位到所属卡片，再在卡片范围内查找th，示例如下：

// 事件委托绑定到页面静态父容器（如卡片外层固定容器、body均可）
$(document).on('change', 'select', function() {
  const $curSelect = $(this);
  // 替换.card为你实际的卡片根节点类名
  const $curCard = $curSelect.closest('.card');
  // 替换.target-th为你实际的目标th类名
  const $targetTh = $curCard.find('th.target-th');

  if ($curSelect.val() === 'EXP') {
    // 替换为你实际的原有类、删除线类名
    $targetTh.removeClass('original-th-class').addClass('line-through-class');
  } else {
    $targetTh.removeClass('line-through-class').addClass('original-th-class');
  }

  // 保留你原有修改卡片头部颜色的逻辑即可
})

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