JS点击事件修改class仅临时生效，如何实现永久生效并支持选色

实现逻辑 #

你之前的代码问题在于将头部的颜色选择按钮和画布格子两类li元素的逻辑混在了一起，也没有全局存储当前选中的画笔颜色，才会出现仅单次生效的问题。按照以下逻辑修改即可：

1. 新增全局变量存储当前选中的画笔颜色
2. 分开选取两类li元素，分别绑定对应事件
3. 点击颜色按钮时更新全局的颜色变量
4. 点击画布格子时，直接应用当前存储的颜色类

完整代码示例 #

HTML（和你原有结构一致）

<header>
  <ul class="header">
    <li class="black active">Black</li>
    <li class="red">Red</li>
    <li class="blue">Blue</li>
    <li class="orange">Orange</li>
  </ul>
</header>
<ul class="grid">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- 剩余格子省略 -->
</ul>

CSS

/* 头部颜色按钮样式 */
.header {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}
.header li {
  padding: 6px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
  color: #fff;
}
/* 颜色类对应背景色 */
.black { background: #000; }
.red { background: #f00; }
.blue { background: #00f; }
.orange { background: #f60; }
/* 选中的颜色按钮激活样式 */
.header li.active {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* 画布格子样式 */
.grid {
  display: grid;
  grid-template-columns: repeat(8, 30px);
  gap: 2px;
  list-style: none;
  padding: 0;
}
.grid li {
  width: 30px;
  height: 30px;
  border: 1px solid #eee;
  cursor: pointer;
}

JavaScript

// 全局存储当前选中的画笔颜色，默认黑色
let currentColor = 'black';
// 选取头部颜色按钮
const colorBtns = document.querySelectorAll('.header li');
// 选取画布所有格子
const gridItems = document.querySelectorAll('.grid li');

// 绑定颜色选择事件
colorBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 更新当前选中的颜色
    currentColor = btn.className.split(' ')[0];
    // 更新按钮激活状态
    colorBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  })
})

// 绑定格子上色事件
gridItems.forEach(item => {
  item.addEventListener('click', () => {
    // 先移除所有旧的颜色类，避免冲突
    item.classList.remove('black', 'red', 'blue', 'orange');
    // 添加当前选中的颜色类
    item.classList.add(currentColor);
  })
})

如果需要支持点击取消上色，把格子的点击逻辑改成如下即可：

gridItems.forEach(item => {
  item.addEventListener('click', () => {
    if(item.classList.contains(currentColor)) {
      item.classList.remove(currentColor);
    } else {
      item.classList.remove('black', 'red', 'blue', 'orange');
      item.classList.add(currentColor);
    }
  })
})

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