Vanilla JS技术求助：检查子元素颜色类并替换的代码失效

你的代码存在两个核心错误 #

• 逻辑运算符误用：你用了位运算符&，条件判断里应该用逻辑与运算符&&，位运算符会导致条件判断结果不符合预期。
• 类检查方法错误：parent1.children[0].contains('red')写法不对，元素本身没有contains方法，要检查元素是否包含指定类，必须调用classList.contains()，也就是parent1.children[0].classList.contains('red')。

实现需求的完整优化代码 #

根据你要的逻辑（检查元素是否有颜色类，有则移除旧类加新类，无则直接加新类），可以把逻辑抽成通用代码，避免重复写多个if分支：

// 先获取选中的颜色和目标元素
const selectedColor = selectColor.value;
let targetElement;

// 根据选中的容器获取对应目标元素
switch(selectDiv.value) {
  case "grandParent":
    targetElement = grandParent.children[0];
    break;
  case "parent-1":
    targetElement = parent1.children[0];
    break;
  // 可继续添加其他容器的判断
}

if (targetElement) {
  // 先移除所有已存在的颜色类（根据你的实际颜色类调整数组内容）
  const colorClassList = ['red', 'green', 'blue'];
  colorClassList.forEach(cls => targetElement.classList.remove(cls));
  
  // 根据选中的颜色添加对应类
  switch(selectedColor) {
    case "R":
      targetElement.classList.add('red');
      break;
    case "G":
      targetElement.classList.add('green');
      break;
    case "B":
      targetElement.classList.add('blue');
      break;
    // 对应其他颜色选项
  }
}

针对你原有代码的直接修正 #

如果不想重构代码，仅修正原有逻辑：

// 修正第一个if的运算符，同时补充移除旧类逻辑
if (selectColor.value == "R" && selectDiv.value == "grandParent") {
  const el = grandParent.children[0];
  el.classList.remove('green', 'blue'); // 移除其他可能存在的颜色类
  el.classList.add("red");
} 

// 修正第二个if的运算符和类检查方法，补充完整逻辑
if (selectColor.value == "R" && selectDiv.value == "parent-1") {
  const el = parent1.children[0];
  // 按需求：有旧类则移除，无则直接添加
  el.classList.remove('green', 'blue');
  el.classList.add("red");
  
  // 如果是要切换red类（点一次加，再点一次删），才需要判断contains：
  // if (!el.classList.contains('red')) {
  //   el.classList.add('red');
  // } else {
  //   el.classList.remove('red');
  // }
}

关键知识点补充 #

• classList常用方法：add()添加类，remove()移除类，toggle()切换类（存在则删除，不存在则添加），contains()检查是否包含指定类。
• 逻辑运算符：条件判断里用&&（逻辑与）、||（逻辑或）、!（逻辑非），位运算符&、|是处理二进制位的，不要用在条件判断中。

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