JS/jQuery技术求助：背景色修改与按钮组同步激活故障排查

问题1：Color类型输入框修改元素背景色失效 #

错误原因 #

1. 语法错误：前两段代码末尾多余的});会导致JS解析失败，因为没有对应的$(function(){包裹结构。
2. 原生JS方法误用：原生DOM元素没有.val()方法，获取输入值应该用.value属性。
3. 事件绑定错误：原生JS绑定change事件需使用addEventListener，而非jQuery的.change()方法。

修正方案 #

原生JS版本

function changebg() {
  // 原生DOM用.value获取输入值
  var bgColor = document.querySelector("#red").value;
  document.querySelectorAll(".a").forEach((c1) => {
    c1.style.backgroundColor = bgColor;
  });
}
// 初始化调用
changebg();
// 原生JS正确绑定change事件
document.querySelector("#red").addEventListener('change', changebg);

jQuery版本

function changebg() {
  var bgColor = $("#red").val();
  $(".a").css("background-color", bgColor);
}
changebg();
// jQuery绑定change事件
$("#red").change(changebg);

说明 #

修正后的changebg()可直接在其他函数中调用，示例：

function otherFunction() {
  // 调用changebg同步背景色
  changebg();
}

问题2：Toggle容器按钮状态同步异常 #

错误原因 #

1. 事件绑定范围不足：document.querySelector('.toggle-container')仅绑定了第一个容器，第二个容器的按钮无响应。
2. 数组操作错误：btns[1,2,3]是无效写法，逗号运算符只会取最后一个值，无法批量操作按钮。
3. 链式调用错误：classList.add()返回undefined，不能链式调用toggle()方法。
4. 未实现跨容器同步：缺少两个容器对应索引按钮的状态同步逻辑。

修正方案 #

// 给所有toggle-container绑定点击事件
document.querySelectorAll('.toggle-container').forEach(container => {
  container.addEventListener('click', ({ target }) => {
    if (!target.matches('.toggle-button')) return;
    
    // 获取当前容器的按钮列表及点击按钮的索引
    const currentBtns = Array.from(container.children);
    const btnIndex = currentBtns.indexOf(target);
    
    // 同步所有容器的对应按钮状态
    document.querySelectorAll('.toggle-container').forEach(box => {
      const allBtns = Array.from(box.children);
      // 移除所有按钮的激活类
      allBtns.forEach(btn => {
        btn.classList.remove('active', 'active1', 'active2');
      });
      // 设置目标按钮的状态
      const targetBtn = allBtns[btnIndex];
      if (btnIndex === 0) {
        targetBtn.classList.add('active');
        targetBtn.classList.toggle('active1');
        targetBtn.classList.toggle('active2');
      } else {
        targetBtn.classList.add('active');
      }
    });
  });
});

说明 #

1. 用document.querySelectorAll('.toggle-container')给所有容器绑定事件，确保两个容器都能响应点击。
2. 通过按钮索引实现跨容器同步，点击任一容器的第N个按钮，所有容器的第N个按钮同步状态。
3. 遍历所有按钮移除激活类，避免btns[1,2,3]这类错误写法。
4. 拆分第一个按钮的toggle逻辑，避免链式调用错误。

内容的提问来源于stack exchange，提问作者try-to-learn