计算器布局网格按钮点击变色实现问题求助

问题分析 #

1. jQuery设置样式的方式错误：你直接用$("#k1").backgroundcolor = 'red'是原生DOM元素的写法，jQuery对象需要用.css()方法来修改样式。
2. HTML结构不完整：缺少数字4-9的按钮，无法实现你要的目标布局。
3. 事件绑定效率低：逐个按钮绑定点击事件太冗余，用统一类名批量绑定更高效。

完整修复代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container">
  <div id="k1" class="num-btn">1</div>
  <div id="k2" class="num-btn">2</div>
  <div id="k3" class="num-btn">3</div>
  <div id="k4" class="num-btn">4</div>
  <div id="k5" class="num-btn">5</div>
  <div id="k6" class="num-btn">6</div>
  <div id="k7" class="num-btn">7</div>
  <div id="k8" class="num-btn">8</div>
  <div id="k9" class="num-btn">9</div>
  <div id="k0" class="num-btn it0">0</div>
</div>

• 补全了4-9的数字按钮，给所有按钮添加num-btn类，方便统一控制。

CSS部分 #

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #c5c5c5;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
  cursor: pointer; /* 鼠标悬停显示指针，提示可点击 */
  transition: background-color 0.2s; /* 加个过渡动画更流畅 */
}

.it0 {
  grid-column-start: 2;
  grid-column-end: 3;
}

/* 可选：用类控制激活样式，推荐样式与逻辑分离 */
.num-btn.active {
  background-color: red;
}

JS部分 #

$(document).ready(function() {
  // 给所有数字按钮绑定点击事件
  $(".num-btn").click(function() {
    // 方式1：直接通过jQuery设置背景色
    $(this).css("background-color", "red");

    // 方式2：添加激活类（更推荐，方便后续修改样式）
    // $(".num-btn").removeClass("active"); // 可选：只让当前点击的按钮变色
    // $(this).addClass("active");
  });
});

• 用$(this)指代当前点击的按钮，避免重复写id；批量绑定事件减少冗余代码。

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