javascript - JS进度条颜色不可见

Question

我使用 jQuery 处理进度条。

所以问题是，我定义了标准颜色，我想在我的进度条上显示取决于我收到的值。

我的代码：

var defaultSegmentColors = ['#FF6363', '#FEF567', '#70FE67'];

function move(value, color, barID) {
  var elem = document.getElementById(barID);
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= value) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';
      $('.myBar').css("background-color", color);
    }
  }
}


function refresh(barElem) {
  var color = "";
  var elements = {
    value: parseInt($(barElem).attr('value')),
    idBar: $(barElem).attr('value-field')
  }

  if (elements['value'] <= 50) {
    color = defaultSegmentColors[0];

  } else if (elements['value'] <= 80) {
    color = defaultSegmentColors[1];

  } else if (elements['value'] <= 85) {
    color = defaultSegmentColors[2];

  }



  move(elements['value'], color, elements['idBar']);
}




$('[data-type="sfcs-progres-bar"]').each(function() {
  refresh(this);
});

#myProgress {
  margin: 5px;
  margin-left: 10%;
  border-radius: 20px;
  width: 85%;
  background-color: #ddd;
}

.myBar {
  width: 10%;
  height: 40px;
  background-color: #535353;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myProgress">
  <div id="myBar0" class="myBar" data-type="sfcs-progres-bar" value="43" value-field="myBar0"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar1" class="myBar" data-type="sfcs-progres-bar" value="80" value-field="myBar1"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar2" class="myBar" data-type="sfcs-progres-bar" value="90" value-field="myBar2"></div>
</div>

如您所见，我具有可以检查elements['value']的功能，最后我从数组defaultSegmentColors返回一些颜色值，其中我有十六进制颜色。

但最终我从 CSS 文件中获得了标准颜色，也许有人会看到错误。因为我浪费了半天时间才找到它，但我还是没有。

标签： javascripthtmlcss

Answer 1

这提供了您正在寻找的东西。通过循环遍历.myBar类，它获取最终元素的值并将其分配给所有条形 - 将类更改为barID值会导致颜色按照您希望的方式出现。

var defaultSegmentColors = ['#FF6363', '#FEF567', '#70FE67'];

function move(value, color, barID) {
  var elem = document.getElementById(barID);
  var width = 0;
  var id = setInterval(frame, 10);

  function frame() {
    if (width >= value) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';

      
      $('#' + barID).css("background-color", color);
    }
  }
}


function refresh(barElem) {
  var color = "";
  var elements = {
    value: parseInt($(barElem).attr('value')),
    idBar: $(barElem).attr('value-field')
  }

  if (elements['value'] <= 50) {
    color = defaultSegmentColors[0];

  } else if (elements['value'] <= 80) {
    color = defaultSegmentColors[1];

  } else {
    color = defaultSegmentColors[2];

  }

  move(elements['value'], color, elements['idBar']);
}




$('[data-type="sfcs-progres-bar"]').each(function() {
  refresh(this);
});

#myProgress {
  margin: 5px;
  margin-left: 10%;
  border-radius: 20px;
  width: 85%;
  background-color: #ddd;
}

.myBar {
  width: 10%;
  height: 40px;
  background-color: #535353;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myProgress">
  <div id="myBar0" class="myBar" data-type="sfcs-progres-bar" value="43" value-field="myBar0"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar1" class="myBar" data-type="sfcs-progres-bar" value="80" value-field="myBar1"></div>
</div>
<br />
<div id="myProgress">
  <div id="myBar2" class="myBar" data-type="sfcs-progres-bar" value="90" value-field="myBar2"></div>
</div>