求助：为多个contenteditable div设置失焦时动态背景色的异常问题

嘿，我太懂你卡了好几个小时的憋屈感！这个问题的核心其实很简单——你肯定是在处理事件的时候，没精准定位到当前操作的那个div，反而不小心一直用了第一个div的状态对吧？

问题根源 #

当你给多个.change类的div绑定事件时，如果用了类似document.querySelector('.change')这种只会选中第一个元素的方法，那不管你操作哪个div，最终都会修改第一个div的背景色，自然就会出现后续div复用第一个颜色的情况。

两种可行解决方案 #

方法一：事件委托（推荐，支持动态添加元素） #

如果你的div可能是动态生成的，或者想让代码更高效，给它们的父元素绑定事件，通过event.target来判断当前触发事件的是不是目标div：

// 这里可以替换成更具体的父容器，比如所有div的直接父元素
document.querySelector('.parent-container').addEventListener('click', function(e) {
  // 确认点击的是目标div
  if (e.target.classList.contains('change')) {
    // 点击时设置白色背景
    e.target.style.backgroundColor = 'white';
  }
});

document.querySelector('.parent-container').addEventListener('focusout', function(e) {
  if (e.target.classList.contains('change')) {
    const currentDiv = e.target;
    // 这里可以根据你的需求自定义背景色逻辑，举个例子：
    if (currentDiv.textContent.trim() === '') {
      // 内容为空时设灰色
      currentDiv.style.backgroundColor = '#f0f0f0';
    } else {
      // 有内容时设浅蓝色
      currentDiv.style.backgroundColor = '#e6f7ff';
    }
  }
});

方法二：直接遍历绑定事件（适合静态元素） #

如果你的div是页面加载时就存在的静态元素，直接遍历所有.change元素，给每个单独绑定事件：

const editableDivs = document.querySelectorAll('.change');

editableDivs.forEach(div => {
  // 点击事件：设白色背景
  div.addEventListener('click', function() {
    this.style.backgroundColor = 'white';
  });

  // 失焦事件：根据内容改背景色
  div.addEventListener('focusout', function() {
    if (this.textContent.trim() === '') {
      this.style.backgroundColor = '#f0f0f0';
    } else {
      this.style.backgroundColor = '#e6f7ff';
    }
  });
});

关键注意点 #

• 一定要用this（在事件回调里指向当前触发事件的元素）或者event.target来获取当前操作的div，绝对不要用只会取第一个元素的document.querySelector('.change')！
• 判断内容的时候记得加trim()，避免用户输入全空格的情况被误判为有内容。

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