如何通过JavaScript实现用户排名状态区块的标记效果？

需求说明 #

页面中有一个条形状态图用于展示用户当前排名，从左到右依次代表落后、中等、优秀。后端会传入1-30的数值，需将对应data-index的span区块标记为红色。

完整实现代码 #

HTML #

<div class="anking">
  <div class="bar behind">
    <span data-index="1"></span>
    <span data-index="2"></span>
    <span data-index="3"></span>
    <span data-index="4"></span>
    <span data-index="5"></span>
    <span data-index="6"></span>
    <span data-index="7"></span>
    <span data-index="8"></span>
    <span data-index="9"></span>
    <span data-index="10"></span>
  </div>
  <div class="bar generally">
    <span data-index="11"></span>
    <span data-index="12"></span>
    <span data-index="13"></span>
    <span data-index="14"></span>
    <span data-index="15"></span>
    <span data-index="16"></span>
    <span data-index="17"></span>
    <span data-index="18"></span>
    <span data-index="19"></span>
    <span data-index="20"></span>
  </div>
  <div class="bar good">
    <span data-index="21"></span>
    <span data-index="22"></span>
    <span data-index="23"></span>
    <span data-index="24"></span>
    <span data-index="25"></span>
    <span data-index="26"></span>
    <span data-index="27"></span>
    <span data-index="28"></span>
    <span data-index="29"></span>
    <span data-index="30"></span>
  </div>
</div>

CSS #

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.anking {
  display: flex;
}

.anking .bar {
  width: 200px;
  height: 10px;
  background-color: #ccc;
  margin: 0px 3px;
  border-radius: 10px;
}

.anking .bar span {
  display: inline-block;
  background-color: transparent;
  width: 10px;
  height: 10px;
}

.red {
  width: 10px;
  height: 10px;
  background: red;
}

JavaScript #

// 模拟后端传入的排名数值，实际项目替换为接口返回的数据即可
const userRank = 15;

// 先清除所有已标红的元素，避免重复标记
document.querySelectorAll('.anking .red').forEach(el => {
  el.classList.remove('red');
});

// 定位对应排名的span并添加红色样式类
const targetSpan = document.querySelector(`.anking span[data-index="${userRank}"]`);
if (targetSpan) {
  targetSpan.classList.add('red');
}

代码解释 #

• 模拟后端数据：userRank变量模拟后端返回的1-30区间数值，实际开发中可直接替换为接口返回值。
• 清除旧标记：每次标记前移除所有已有的red类，保证页面只显示当前排名的标记。
• 标记当前排名：通过属性选择器精准定位对应data-index的span元素，添加red类实现标红效果。

更优实现方案 #

如果需要展示从起始到当前排名的所有区块都标红（符合常见的进度式排名展示逻辑），可修改JavaScript代码如下：

const userRank = 15;

// 清除所有旧标记
document.querySelectorAll('.anking .red').forEach(el => {
  el.classList.remove('red');
});

// 遍历从1到当前排名的所有index，统一添加红色样式
for (let i = 1; i <= userRank; i++) {
  const span = document.querySelector(`.anking span[data-index="${i}"]`);
  if (span) {
    span.classList.add('red');
  }
}

效果参考 #

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