[JavaScript知识库]react+ts滑动双球，区间定位相应图标加色

这是在for循环的标签内使用三元运算符，刚开始让所有的按钮颜色为红色，然后判断不在那个区间中的元素，背景色设置为灰色。

index.tsx中

//标签里写的切换
import { Component } from "react";
import './index.less';

interface Props {

}
interface State {
  Num: number,
  MaxNum: number,
  ButtonList:Button[],
}

interface Button{
  ID:number,
  number:number,
  content:string,
  flag:boolean
}



class Drag extends Component<Props, State>{
  constructor(props: Props) {
    super(props);
    this.state = {
      Num: 0,
      MaxNum: 100,
      ButtonList:[
        {
          ID:1,
          number:10,
          content:'0-10',
          flag:false
        },
        {
          ID:2,
          number:20,
          content:'10-20',
          flag:false
        },
        {
          ID:3,
          number:30,
          content:'20-30',
          flag:false
        },
        {
          ID:4,
          number:40,
          content:'30-40',
          flag:false
        },
        {
          ID:5,
          number:50,
          content:'40-50',
          flag:false
        },
        {
          ID:6,
          number:60,
          content:'50-60',
          flag:false
        },
        {
          ID:7,
          number:70,
          content:'60-70',
          flag:false
        },
        {
          ID:8,
          number:80,
          content:'70-80',
          flag:false
        },
        {
          ID:9,
          number:90,
          content:'80-90',
          flag:false
        },
        {
          ID:10,
          number:100,
          content:'90-100',
          flag:false
        },
      ],
    }
  }
  parent?: HTMLDivElement;
  child!: HTMLCollection;
  startX: number = 0;
  ballW: number = 0;
  oW: number = 0;
  x: number = 0;
  dis: number = 0;
  Num: number = 0;
  MaxNum: number = 0;
  scale: number = 0;
  FnStart(ev: React.TouchEvent) {
    this.startX = ev.changedTouches[0].pageX - (ev.target as HTMLDivElement).offsetLeft;
    this.parent = ((ev.target as HTMLDivElement).parentNode) as HTMLDivElement;
    this.child = this.parent.children;
    this.ballW = (ev.target as HTMLDivElement).offsetWidth;
    this.oW = this.parent.offsetWidth - this.ballW;
    document.ontouchmove = this.FnMove.bind(this);
    document.ontouchend = this.FnEnd.bind(this);
  }
  FnMove(ev: TouchEvent) {
    this.x = ev.changedTouches[0].pageX - this.startX;
    if (this.x < 0) this.x = 0;
    if (this.x > this.oW) this.x = this.oW;
    for (var i = 0; i < this.child.length; i++) {
      if (this.child[i].classList.contains('small-ball')) {
        let Len = this.child.length - 2;
        if (i === Len) {
          this.dis = Math.abs((this.child[i] as HTMLDivElement).offsetLeft - (this.child[i + 1] as HTMLDivElement).offsetLeft);
          (this.child[1] as HTMLDivElement).style.width = this.dis + 'px';
          if ((this.child[i] as HTMLDivElement).offsetLeft - (this.child[i + 1] as HTMLDivElement).offsetLeft < 0) {
            (this.child[1] as HTMLDivElement).style.left = (this.child[i] as HTMLDivElement).offsetLeft + 'px';
          } else {
            (this.child[1] as HTMLDivElement).style.left = (this.child[i + 1] as HTMLDivElement).offsetLeft + 'px';
          }
        }
      }
    }
    // 两小球互推,注释掉就是交叉
    if ((ev.target as HTMLDivElement).className.indexOf('ac') === -1) {
      if (this.x + this.ballW > (this.child[3] as HTMLDivElement).offsetLeft) {
        if (this.x > this.oW - this.ballW) this.x = this.oW - this.ballW;
        (this.child[2] as HTMLDivElement).style.left = this.x + 'px';
        (this.child[3] as HTMLDivElement).style.left = this.x + this.ballW + 'px';
      }
    }
    if ((ev.target as HTMLDivElement).className.indexOf('ac') !== -1) {
      if (this.x - this.ballW < (this.child[2] as HTMLDivElement).offsetLeft) {
        if (this.x < this.ballW) this.x = this.ballW;
        (this.child[2] as HTMLDivElement).style.left = this.x - this.ballW + 'px';
        (this.child[3] as HTMLDivElement).style.left = this.x + 'px';
      }
    }

    this.scale = (this.oW) / 100; //一份的长度
    let left = (this.child[2] as HTMLDivElement).offsetLeft;
    this.Num = Math.floor((left / this.scale));
    if (this.Num < 0) this.Num = 0;
    if (this.Num > 100) this.Num = 100;
    let right = (this.child[3] as HTMLDivElement).offsetLeft;
    this.MaxNum = Math.floor(right / this.scale);
    if (this.MaxNum < 0) this.MaxNum = 0;
    if (this.MaxNum > 100) this.MaxNum = 100;
    this.setState({
      Num: this.Num,
      MaxNum: this.MaxNum,
    });
    (ev.target as HTMLDivElement).style.left = this.x + 'px';
  }
  FnEnd() {
    document.ontouchmove = null;
    document.ontouchend = null;
  }

  render() {
    return (
      <div className="ball-drag-wrap">
        <div className="ball-wrap">
          <div className="line"></div>
          <div className="line active"></div>
          <div className="small-ball" onTouchStart={this.FnStart.bind(this)}><div className="num">{this.state.Num}</div></div>
          <div className="small-ball ac" onTouchStart={this.FnStart.bind(this)}><div className="num">{this.state.MaxNum}</div></div>
        </div>
        <div className="button-list-wrap">
            {this.state.ButtonList.map((item)=>
              <div className="button-list" key={item.ID} style={{backgroundColor:this.Num>=item.number?'#f7f8fa':''||this.MaxNum+10<=item.number?'#f7f8fa':''}}>{item.content}</div>
            )}
        </div>
      </div>
    )
  }
}

export default Drag;

index.less中

.ball-drag-wrap{
    .ball-wrap {
        width: 500px;
        height: 60px;
        margin: 200px auto;
        position: relative;
     
        .line {
            width: 500px;
            height: 3px;
            background: #e3e3e3;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
     
        .line.active {
            width: 500px;
            height: 3px;
            background: skyblue;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
     
        .small-ball {
            width: 50px;
            height: 50px;
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0;
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            .num{
                position: relative;
                top: 50px;
            }
        }
     
        .small-ball.ac {
            width: 50px;
            height: 50px;
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: calc(500px - 50px);
            border-radius: 50%;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
    }
    .button-list-wrap{
        .button-list{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: red;
            margin-bottom: 10px;
        }
        
    }
}