纯JavaScript实现单选式评分组件：仅允许单个class为number的div被点击变色

嘿，我来帮你搞定这个单选评分的问题！你现在的代码能让每个数字块点击变色，但没法做到单选——其实核心思路很简单：每次点击新的数字块时，先把所有数字块的样式重置回默认状态，再给当前点击的元素设置选中样式，这样就只会有一个块保持选中状态啦。

先看看问题出在哪：你当前的代码只给点击的元素添加样式，但从来没清除过之前选中元素的样式，所以点一个就多一个变色的块。接下来我给你两种实现方式，一种直接适配你现有代码，另一种更优雅的用CSS类来管理样式。

方式一：直接修改行内样式（适配你现有代码） #

你的HTML结构不用改动：

<div class="number icon"><h2>1</h2></div>
<div class="number icon"><h2>2</h2></div>
<div class="number icon"><h2>3</h2></div>
<div class="number icon"><h2>4</h2></div>
<div class="number icon"><h2>5</h2></div>

修改JavaScript代码，新增一个重置所有样式的函数，每次点击前先调用它：

const numbers = document.getElementsByClassName('number');

// 重置所有数字块的样式回默认状态
function resetStyles() {
  for (let i = 0; i < numbers.length; i++) {
    // 清空行内样式，恢复CSS里设置的默认样式
    numbers[i].style.backgroundColor = '';
    numbers[i].style.color = '';
    // 如果你的默认样式是固定值，也可以直接写具体值，比如：
    // numbers[i].style.backgroundColor = 'hsl(213, 19%, 18%)';
    // numbers[i].style.color = 'hsl(217, 12%, 63%)';
  }
}

function setupClickHandler(element) {
  element.addEventListener('click', () => {
    resetStyles(); // 先把所有已选中的块重置
    // 再给当前点击的块设置选中样式
    element.style.backgroundColor = 'hsl(216, 12%, 54%)';
    element.style.color = 'white';
  });
}

// 给每个数字块绑定点击事件
for (let i = 0; i < numbers.length; i++) {
  setupClickHandler(numbers[i]);
}

方式二：用CSS类管理样式（更推荐，维护更方便） #

这种方式把样式都放在CSS里，JS只负责添加/移除类，后期修改样式不用动JS，更符合前端最佳实践。

先写CSS：

/* 默认样式 */
.number {
  background-color: hsl(213, 19%, 18%); /* 示例默认背景色，可按需修改 */
  color: hsl(217, 12%, 63%); /* 示例默认文字色，可按需修改 */
  /* 加上你需要的其他样式，比如圆角、padding、cursor等 */
}

/* 选中状态样式 */
.number.selected {
  background-color: hsl(216, 12%, 54%);
  color: white;
}

HTML结构不变，JS代码简化成这样：

const numbers = document.getElementsByClassName('number');

// 移除所有数字块的选中类
function resetSelection() {
  for (let i = 0; i < numbers.length; i++) {
    numbers[i].classList.remove('selected');
  }
}

function setupClickHandler(element) {
  element.addEventListener('click', () => {
    resetSelection();
    element.classList.add('selected');
  });
}

// 绑定所有点击事件
for (let i = 0; i < numbers.length; i++) {
  setupClickHandler(numbers[i]);
}

这样不管你后期要改选中状态的颜色，还是默认样式，直接修改CSS就行，不用碰JS代码，是不是更省心？

备注：内容来源于stack exchange，提问作者Dejan