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

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

javascript html css reactjs

Javascript 如何使用css计数器使第一个li值为0，然后增加2？,javascript,html,css,reactjs,jsx,Javascript,Html,Css,Reactjs,Jsx,我正在尝试制作一个进度条。当我使用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> &l

我正在尝试制作一个进度条。当我使用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>

方法将元素的类名更改为高亮显示onClick

如果重置计数器而不说明值2nd param，则默认值为0。但是，计数器增量会立即应用，因此如果计数器的初始值为0，则在代码中同时显示增量的元素li:：before计数器的值将为2而不是0。如果您需要一个元素的计数器为0，则在您的情况下，将初始计数器值设置为-设置值-2

在代码中-将计数器重置为-2，第1个增量将使其升高到0：

示例HTML和not React：

.progressbar{ 计数器复位：步骤-2； } 李先生{ 列表样式类型：无；宽度：15%；浮动：左；字体大小：12px；位置：相对位置；文本对齐：居中；文本转换：大写；颜色：7d7d7d； } 李：以前{ 宽度：30px；高度：30px；内容：反步骤；计数器增量：步骤2；线高：30px；边框：2个实心7D7D；显示：块；文本对齐：居中；保证金：0自动10px自动；边界半径：50%；背景色：白色； } .李：之后{ 宽度：100%；高度：2倍；内容：；位置：绝对位置；背景色：7d7d7d；顶部：15px；左-50%； z指数：-1； } 李：第一个孩子：：之后{ 内容：无； } .progressbar li.active：：之前{ 宽度：40px；高度：40px；线高：40px；文本对齐：居中；利润上限：-4px；背景色：FF5A66；边框颜色：FF5A66；颜色：白色； }

在代码中-将计数器重置为-2，第1个增量将使其升高到0：

示例HTML和not React：

试试下面的方法

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

计数器重置的第二个属性是一个可选整数，它允许您将计数器重置为所需的任何值。由于您的开始时间为2，您希望扣除/重置为-2

试试下面的方法

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

除了回答你的CSS问题外，我还调整了你的react代码，作为我自己的学习经验

我做了一些更改：它不是单击进度条上的按钮，而是对整个进度条上的单击做出反应，并在每次单击时进行计数，在进度结束时重置为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;

除了回答你的CSS问题外，我还调整了你的react代码，作为我自己的学习经验

我做了一些更改：它不是单击进度条上的按钮，而是对整个进度条上的单击做出反应，并在每次单击时进行计数，在进度结束时重置为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;

发布您的changeColor方法以及发布您的changeColor方法谢谢。那也很有帮助。谢谢。这也很有帮助。

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;