时间戳

首页 > 解决方案 > 进度条作为里程碑

javascript - 进度条作为里程碑

问题描述

当我点击一个特定的里程碑时，我已经编写了一个进度条的代码来动态增加。

当我点击一个里程碑时，我希望颜色保持红色，但我不能onclick为每个 div 添加方法。

我已经更新了代码，我已经在一行中插入了列，所以我想在第一列中保留进度条，但是点溢出了。有人可以帮忙吗？

var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
  elem.onclick = function() {
    const current = this;
    let flag = false;
    document.getElementById('pp').style.width = current.dataset.width + '%';
    mileStones.forEach(elem => {
      elem.classList.add('active');

      if (flag) elem.classList.remove('active');
      if (current.id === elem.id) flag = true;

    });
  }
});
.progress {
  width: 100%;
  height: 6px;
  margin-top: 50px;
}

.progress-bar {
  width: 50%;
  background-color: #00A2DB;
}

#one,
#two,
#three,
#four,
#five {
  position: absolute;
  margin-top: -8px;
  z-index: 1;
  height: 20px;
  width: 20px;
  border-radius: 25px;
}

#one,
.percent {
  left: 0%;
}

#two,
.percent1 {
  left: 25%;
}

#three,
.percent2 {
  left: 50%;
}

#four,
.percent3 {
  left: 75%;
}

#five,
.percent4 {
  left: 100%;
}

.primary-color {
  background-color: pink;
}

.primary-color:active {
  background-color: red;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<div class="row">
  <div class="col-9">
    <p>Business case completion:</p>
    <div class="progress" id="progress">
      <div class="primary-color" id="one" data-width="0"></div>
      <div class="primary-color" id="two" data-width="25"></div>
      <div class="primary-color" id="three" data-width="50"></div>
      <div class="primary-color" id="four" data-width="75"></div>
      <div class="primary-color" id="five" data-width="100"></div>
      <div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
    </div>
  </div>
  <div class="col-3 align-self-end">
    <p class="primary1"> ID 453</p>
  </div>
</div>

标签： javascripthtmlcssprogress-bar

解决方案

您可以创建一个通用方法来为每一英里的石头设置 onclick，您可以使用一个“活动”类来保持活动样式，您还可以从数据属性中受益，以使功能动态化。

版本 要保留单击的里程碑之前的里程碑，您可以使用标志。为了实现这一点。

var mileStones = Array.from(document.querySelectorAll('.primary-color'));
mileStones.forEach(elem => {
  elem.onclick = function() {
    const current = this;
    let flag = false;
    document.getElementById('pp').style.width = current.dataset.width+'%';
    mileStones.forEach(elem =>{ 
      elem.classList.add('active');
      
      if(flag) elem.classList.remove('active'); 
      if(current.id === elem.id) flag = true;
           
    }); 
  }
});
.progress {
  width: 100%;
  height: 6px;
}

.progress-bar {
  width: 50%;
  background-color: #00A2DB;
}

#one,
#two,
#three,
#four,
#five {
  position: absolute;
  margin-top: -8px;
  z-index: 1;
  height: 20px;
  width: 20px;
  border-radius: 25px;
}

#one {
  left: 0%;
}

#two {
  left: 25%;
}

#three {
  left: 50%;
}

#four {
  left: 75%;
}

#five {
  left: 100%;
}

.primary-color {
  background-color: pink;
}

.primary-color:active, .active {
  background-color: red;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>

<div class="progress">
  <div class="primary-color" id="one" data-width="0"></div>
  <div class="two primary-color" id="two" data-width="25"></div>
  <div class="three primary-color" id="three" data-width="50"></div>
  <div class="four primary-color" id="four" data-width="75"></div>
  <div class="five primary-color" id="five" data-width="100"></div>
  <div class="progress-bar" id="pp" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" onclick="progressBarTest()"></div>
</div>

推荐阅读