如何通过javascript实现排名状态在哪个版块的效果？

h22fl7wq 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(125)

我有一个需求，屏幕上有一个条形状态图，显示用户当前的排名，从左到右分别代表，落后，一般，好，后台会传递一个值给我，最大值是30，最小值是1，我的任务就是把这个值放到状态长列表的位置，目前我的想法是这样的：把一个长条分成三个大块，每个大块有10个小块，我用span标签来划分，如果后端传过来的值是8，那么把span中匹配data-index = 8的块变成红色显示，由于我是编程新手，目前遇到的困难是我有一个想法，但是编程部分我不知道怎么写，希望能得到在座各位的帮助，或者如果大家有更好的方法，希望大家能与我分享，谢谢。

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;
}

<div class="anking">
  <div class="bar ehind">
    <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>

JavaScript

来源：https://stackoverflow.com/questions/75125720/how-to-achieve-the-effect-of-which-block-the-ranking-status-is-in-through-javasc

1条答案

按热度按时间

t3psigkw1#

假设你有N个block，服务器返回一个0到N-1之间的索引，那么你所要做的就是在给定的索引中找到block元素，下面是一个如何在JS中通过索引访问集合的演示。
还要注意的是，你的.red CSS类不够具体，无法覆盖默认样式，你需要让它更具体一些，下面的演示再次演示了如何做到这一点：

const blocks = document.querySelectorAll('.bar > span');
const mockValueFromServer = 8;
blocks[mockValueFromServer - 1].classList.add('red')

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;
}

.anking .bar span.red {
  background: red;
}

<div class="anking">
  <div class="bar ehind">
    <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>

赞(0）回复(0）举报 2023-01-16

我来回答

如何通过javascript实现排名状态在哪个版块的效果？

1条答案

相关问题

热门标签

最新问答