如何使第一个 li 值为 0，然后使用 css 计数器增加 2？

Question

我正在尝试制作一个步骤进度条。当我使用 css 计数器时，它从 2 开始，然后变成 2 4 6 8 10 12。我希望它改为 0 2 4 6 8 10。我尝试将计数器重置为 0，但在所有元素上将其更改为 0。

这是我的代码

<div>
  <ul className="progressbar">
    <li id="0" onClick={ ()=> {this.changeColor(0)}} className=""></li>
    <li id="2" onClick={ ()=> {this.changeColor(2)}} className=""></li>
    <li id="4" onClick={ ()=> {this.changeColor(4)}} className=""></li>
    <li id="6" onClick={ ()=> {this.changeColor(6)}} className=""></li>
    <li id="8" onClick={ ()=> {this.changeColor(8)}} className=""></li>
    <li id="10" onClick={ ()=> {this.changeColor(10)}} className=""></li>
  </ul>
</div>

它的CSS：

.container {
  width: 600px;
  margin: 100px auto; 
}
.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 15%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step 2;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active:before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: -4px;
  background-color: #FF5A66;
  border-color: #FF5A66;
  color: white;
}

改变一个元素的className的方法来高亮onClick

changeColor = (id) => {
  var value1 = document.getElementById("0");
  var value2 = document.getElementById("2");
  var value3 = document.getElementById("4");
  var value4 = document.getElementById("6");
  var value5 = document.getElementById("8");
  var value6 = document.getElementById("10");

  if (id == 0) {
    console.log(id);
    value1.className = "active";
    value2.className = "";
    value3.className = "";
    value4.className = "";
    value5.className = "";
    value6.className = "";
    this.setState({
      imageToShow: "images/icons/blob/good-blob.svg",
      textToShow: "I'm good"
    });
  }
}

Answer 1

当您在未说明值（第二个参数）的情况下重置计数器时，默认值为 0。但是，计数器增量会立即应用，因此如果计数器的初始值为 0，则代码中的元素（li::before ) 两者都显示一个增量，计数器的值将是2 而不是0。如果您需要一个元素的计数器为0，请将初始计数器值设置为 - 设置值（在您的情况下为-2）。

在您的代码中 - 将计数器重置为 -2，第一个增量会将其提升为 0：

.progressbar {
  counter-reset: step -2;
}

示例（HTML 而非 React）：

.progressbar {
  counter-reset: step -2;
}

.progressbar li {
  list-style-type: none;
  width: 15%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}

.progressbar li::before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step 2;
  line-height: 30px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}

.progressbar li::after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child::after {
  content: none;
}

.progressbar li.active::before {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-top: -4px;
  background-color: #FF5A66;
  border-color: #FF5A66;
  color: white;
}

<div>
  <ul class="progressbar">
    <li id="0"></li>
    <li id="2"></li>
    <li id="4"></li>
    <li id="6"></li>
    <li id="8"></li>
    <li id="10"></li>
  </ul>
</div>

Answer 2

除了关于您的 CSS 问题的答案之外，我还调整了您的反应代码作为我自己的学习经验。

我进行了一些更改：它不是单击进度条上的按钮，而是对完整条上的单击做出反应并在每次单击时计数，在最后进度到 100% 后重置。

import React from "react";
import "./progress-bar.css";

class ProgressBar extends React.Component {
  constructor(props) {
    super(props);

    // the state defines the value of the last circle to set the class "active" to
    this.state = {
      value: 0
    };
  }

  // increment the state value by +1, 
  // or reset it to 0 if we reached the end of the progress bar
  increment() {
    this.setState((prevState, props) => {
      return {
        ...prevState,
        value: prevState.value === 5 ? 0 : prevState.value + 1
      };
    });
  }

  render() {
    let items = [];
    // create the corresponding circles with the IDs 0 - 10, incrementing by 2 each
    for (let id in [0, 2, 4, 6, 8, 10]) {
      items.push(
        <li
          id={id}
          key={id}
          // setting the className by comparing with the `state.value
          className={this.state.value >= id ? "active" : ""}
        ></li>
      );
    }

    return (
      <div onClick={() => this.increment()}>
        <ul className="progressbar">{items}</ul>
      </div>
    );
  }
}

export default ProgressBar;

Answer 3

counter-reset 的第二个属性是可选的integer，它允许您将计数器重置为您想要的任何值。当你的从2 开始时，你想用-2 扣除/重置

试试下面的

.progressbar {
  counter-reset: step -2;
}