javascript - 通过多个元素重复脚本

Question

我创建了一个脚本，将 HTML 值从一个元素转换为百分比，然后百分比值确定另一个元素(在本例中为条)的宽度。

这对于单个元素来说一切都很好(正如您将看到的)，但是，当我有一个元素在页面中回显时，它就不起作用了。我可以在这里指出正确的方向吗？

当前的 JS fiddle :http://jsfiddle.net/ctalke/27no66rm/

//==================================== Bar Percentage Start ================================//
var a = document.getElementsByClassName('term')[0].innerHTML;
var b = document.getElementsByClassName('age')[0].innerHTML;
var c = 100;
var d = b / a;
var e = d * c;

document.getElementsByClassName('barv')[0].style.width = Math.round(e) + '%';
document.getElementsByClassName('barv')[0].innerHTML = Math.round(e) + '%';
//==================================== Bar Percentage End =================================//

//===================================== Bar Colour Start ==================================//
var a1 = document.getElementById("barv");

if (e < 50) {
  a1.className += " green";
} else if (e < 99) {
  a1.className += " yellow";
} else {
  a1.className += " red";
}
//===================================== Bar Colour End ==================================//

.bar {
  text-align: center;
  height: 20px;
  border: 1px solid black;
  color: white;
}

.hide {
  display: none;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
  color: black!important;
}

.green {
  background-color: green;
}

<!-- Term -->
<div class="term hide">36</div>
<!-- Age -->
<div class="age hide">35</div>
<!-- Progress Bar -->
<div class="bar barv red"></div>

<br>

<!-- Term 1 -->
<div class="term hide">36</div>
<!-- Age 1 -->
<div class="age hide">2</div>
<!-- Progress Bar 1 -->
<div class="bar barv yellow"></div>

<br>

<!-- Term 2 -->
<div class="term hide">36</div>
<!-- Age 2 -->
<div class="age hide">15</div>
<!-- Progress Bar 2 -->
<div class="bar barv green"></div>

Answer 1

您只需要使用 for 循环遍历代码段即可。

var bars = document.getElementsByClassName('bar');

for (i = 0; i < bars.length; i++) {
    // Your code here
}

并将[0]替换为[i]

//==================================== Bar Percentage Start ================================//
var bars = document.getElementsByClassName('bar');

for (i = 0; i < bars.length; i++) {
  var a = document.getElementsByClassName('term')[i].innerHTML;
  var b = document.getElementsByClassName('age')[i].innerHTML;
  var c = 100;
  var d = b / a;
  var e = d * c;

  document.getElementsByClassName('barv')[i].style.width = Math.round(e) + '%';
  document.getElementsByClassName('barv')[i].innerHTML = Math.round(e) + '%';
  //==================================== Bar Percentage End =================================//

  //===================================== Bar Colour Start ==================================//
  var a1 = document.getElementsByClassName("barv")[i];

  if (e < 50) {
    a1.className += " green";
  } else if (e < 99) {
    a1.className += " yellow";
  } else {
    a1.className += " red";
  }
}
//===================================== Bar Colour End ==================================//

.bar {
  text-align: center;
  height: 20px;
  border: 1px solid black;
  color: white;
}

.hide {
  display: none;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
  color: black!important;
}

.green {
  background-color: green;
}

<!-- Term -->
<div class="term hide">36</div>
<!-- Age -->
<div class="age hide">35</div>
<!-- Progress Bar -->
<div class="bar barv red"></div>

<br>

<!-- Term 1 -->
<div class="term hide">36</div>
<!-- Age 1 -->
<div class="age hide">2</div>
<!-- Progress Bar 1 -->
<div class="bar barv yellow"></div>

<br>

<!-- Term 2 -->
<div class="term hide">36</div>
<!-- Age 2 -->
<div class="age hide">15</div>
<!-- Progress Bar 2 -->
<div class="bar barv green"></div>

您可以通过将相同选择器缓存在变量中来减少重复。

//==================================== Bar Percentage Start ================================//
var bars = document.querySelectorAll('.bar');

for (i = 0; i < bars.length; i++) {
  var bar = bars[i];
  var term = document.querySelectorAll('.term')[i];
  var age = document.querySelectorAll('.age')[i];
  var a = term.innerHTML;
  var b = age.innerHTML;
  var c = 100;
  var d = b / a;
  var e = d * c;

  bar.style.width = Math.round(e) + '%';
  bar.innerHTML = Math.round(e) + '%';
  //==================================== Bar Percentage End =================================//

  //===================================== Bar Colour Start ==================================//
  if (e < 50) {
    bar.classList.add("green");
  } else if (e < 99) {
    bar.classList.add("yellow");
  } else {
  bar.classList.add("red");
  }
}
//===================================== Bar Colour End ==================================//