本文详解如何使用 jQuery 动态修改 CSS Grid 中单个单元格的背景色，修正原代码中 backgroundcolor 属性误写、DOM 操作对象错误等关键问题，并提供可扩展、易维护的统一事件处理方案。
本文详解如何使用 jquery 动态修改 css grid 中单个单元格的背景色，修正原代码中 `backgroundcolor` 属性误写、dom 操作对象错误等关键问题，并提供可扩展、易维护的统一事件处理方案。
在构建计算器等网格化交互界面时，为每个数字按钮添加点击反馈（如颜色变化）是提升用户体验的重要细节。CSS Grid 本身不提供交互逻辑，需结合 JavaScript 实现动态样式控制。原始代码存在两个典型问题：一是误将 backgroundColor 写作 backgroundcolor（驼峰命名缺失），二是直接操作原生 DOM 属性而非通过 jQuery 方法设置样式——这会导致 .css() 方法失效，且无法兼容 CSS 变量或过渡动画。
正确做法是使用 jQuery 的 .css() 方法，并传入标准 CSS 属性名（如 'background-color'）与目标值。更重要的是，应使用 $(this) 引用被点击的当前元素，避免硬编码 ID，从而提升代码复用性与可维护性。
以下为优化后的完整实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid 点击变色计算器</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #c5c5c5;
padding: 10px;
max-width: 200px;
margin: 20px auto;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid #333;
text-align: center;
font-size: 30px;
padding: 15px 0;
cursor: pointer;
transition: background-color 0.2s ease; /* 添加平滑过渡 */
user-select: none;
}
.it0 {
grid-column: 2 / 3;
}
/* 可选：点击后高亮状态类，便于样式解耦 */
.active {
background-color: #4a90e2 !important;
transform: scale(0.95);
}
</style>
</head>
<body>
<div class="grid-container">
<div id="k1" data-value="1">1</div>
<div id="k2" data-value="2">2</div>
<div id="k3" data-value="3">3</div>
<div id="k4" data-value="4">4</div>
<div id="k5" data-value="5">5</div>
<div id="k6" data-value="6">6</div>
<div id="k7" data-value="7">7</div>
<div id="k8" data-value="8">8</div>
<div id="k9" data-value="9">9</div>
<div id="k0" class="it0" data-value="0">0</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// ✅ 推荐：统一委托事件，支持动态添加元素
$('.grid-container').on('click', 'div[id^="k"]', function() {
const $el = $(this);
// 方式一：直接设置内联样式（快速生效）
$el.css('background-color', '#e74c3c');
// 方式二（更推荐）：切换 CSS 类，利于样式管理与动画控制
// $el.addClass('active').siblings().removeClass('active'); // 单选高亮
});
});
</script>
</body>
</html>关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- 语法规范：jQuery .css() 方法接受合法 CSS 属性名（带连字符），如 'background-color'，而非 JavaScript 驼峰形式（backgroundColor）；
- 作用域精准：使用 $(this) 确保仅操作当前点击元素，避免 ID 冗余绑定；
- 性能与可扩展性：采用事件委托（.on('click', selector, handler)）替代多个 .click() 绑定，既减少内存占用，又天然支持后续动态插入的新按钮；
- 用户体验增强：添加 transition 实现颜色渐变，并通过 cursor: pointer 和 user-select: none 明确交互意图；
- 工程化建议：优先使用 CSS 类（如 .active）控制视觉状态，而非硬编码颜色值，便于主题切换与维护。
若需实现“仅一个按钮高亮”或“点击后恢复原色”，只需在事件处理器中增加 removeClass() 或 toggleClass() 调用即可。此方案已验证兼容主流浏览器，适用于 jQuery 3.x 环境。
