Angular评分系统实现：点击单个Div置灰，清除其他Div背景色

看起来你已经搭好了评分模块的基础结构，只差把选中状态和样式绑定起来的逻辑啦！结合你给出的代码片段，我给你两种实用的实现方案，适配常见的前端场景：

方案一：动态绑定内联样式（快速上手） #

假设你用的是Vue（从代码风格看大概率是），可以直接通过rating变量控制每个div的背景色：

修改后的HTML结构 #

<div class="rating_start">
  <!-- 如果是循环生成5个评分项 -->
  <div 
    class="has_st" 
    v-for="(item, idx) in 5" 
    :key="idx"
    @click="takeVote(idx)"
    :style="{ backgroundColor: rating === idx ? '#ccc' : 'transparent' }"
  >
    <!-- 这里放评分内容，比如星星图标 -->
  </div>

  <!-- 如果是手动写的5个div（非循环） -->
  <!-- <div class="has_st" @click="takeVote(1)" :style="{ backgroundColor: rating === 1 ? '#ccc' : 'transparent' }"></div>
  <div class="has_st" @click="takeVote(2)" :style="{ backgroundColor: rating === 2 ? '#ccc' : 'transparent' }"></div>
  <div class="has_st" @click="takeVote(3)" :style="{ backgroundColor: rating === 3 ? '#ccc' : 'transparent' }"></div>
  <div class="has_st" @click="takeVote(4)" :style="{ backgroundColor: rating === 4 ? '#ccc' : 'transparent' }"></div>
  <div class="has_st" @click="takeVote(5)" :style="{ backgroundColor: rating === 5 ? '#ccc' : 'transparent' }"></div> -->
</div>

简化后的JS方法 #

takeVote(e) {
  this.rating = e; // 把当前点击项的索引/标识赋值给rating变量
}

方案二：动态绑定CSS类（更推荐，样式逻辑分离） #

这种方式符合前端最佳实践，把样式写在CSS里，通过类的切换控制状态：

添加CSS样式 #

.has_st {
  /* 你的基础样式，比如宽高、边框等 */
}
.has_st.active {
  background-color: #ccc; /* 选中时的灰色背景 */
}

修改后的HTML结构 #

<div class="rating_start">
  <div 
    class="has_st" 
    v-for="(item, idx) in 5" 
    :key="idx"
    @click="takeVote(idx)"
    :class="{ active: rating === idx }"
  >
    <!-- 评分内容 -->
  </div>
</div>

JS方法和方案一一致 #

takeVote(e) {
  this.rating = e;
}

核心逻辑说明 #

当你点击任意一个div时，takeVote会把当前项的索引（或自定义标识）赋值给this.rating。每个div会实时判断：

• 如果自己的索引和rating相等，就应用灰色背景（内联样式或active类）
• 如果不相等，就恢复默认背景（透明或移除active类）

这样就自动实现了“点击一个，其他项自动取消高亮”的效果～如果你的技术栈是原生JS而非Vue，随时告诉我，我可以给你原生版本的实现代码！

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