按标签名修改类名：窗口宽度切换类名的代码异常求助

嘿，我看你这段切换td类名的代码遇到了运行问题，咱们一步步来梳理并修复它：

首先你的代码存在几个明显的问题：

• 代码片段被截断了（最后td...没写完，逻辑不完整）
• 没有监听窗口的resize事件，没法触发类名的切换动作
• 直接硬编码索引获取td（比如td[0]、td[3]），如果页面中td数量不足，会直接报错

下面是修复并优化后的完整代码，我会标注关键改进点：

// 获取页面中所有td元素
const tds = document.getElementsByTagName("td");

// 给目标td添加宽屏类名
function applyWideScreenClass() {
  // 你原来的目标是索引0、3、6、9的td，用循环简化重复代码
  for (let i = 0; i < tds.length; i += 3) {
    // 先判断元素是否存在，避免出现"undefined"错误
    if (tds[i]) {
      tds[i].className = "waddons-wsite-multicol-col";
    }
  }
}

// 恢复td的默认类名
function applyNormalClass() {
  for (let i = 0; i < tds.length; i += 3) {
    if (tds[i]) {
      tds[i].className = "wsite-multicol-col";
    }
  }
}

// 根据窗口宽度判断应该应用哪个类名
function handleWindowSizeChange() {
  // 这里的768px是常见的响应式断点，你可以根据需求修改
  if (window.innerWidth > 768) {
    applyWideScreenClass();
  } else {
    applyNormalClass();
  }
}

// 页面加载完成后先执行一次，确保初始状态正确
window.addEventListener('load', handleWindowSizeChange);
// 监听窗口尺寸变化，实时切换类名
window.addEventListener('resize', handleWindowSizeChange);

几个重要的优化说明： #

• 修复截断问题：补全了默认类名的设置逻辑，并用循环替代重复的索引操作，代码更简洁也更容易维护
• 增加安全判断：每次操作td前先检查元素是否存在，避免页面td数量不足时抛出错误
• 绑定必要事件：添加load事件确保页面刚加载时就应用正确的类名，resize事件让类名随窗口尺寸实时切换
• 灵活调整断点：你可以把768改成你需要的宽度阈值，比如1024px适配大屏设备

另外，如果你的td还需要保留其他类名（不是完全替换），推荐用classList的方式操作，这样不会覆盖原有类名：

// 替换类名的更灵活方式
if (tds[i]) {
  tds[i].classList.remove("wsite-multicol-col");
  tds[i].classList.add("waddons-wsite-multicol-col");
}

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