Question

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

这对于单个元素来说一切都很好（如您所见），但是，当我有一个元素通过页面回显时，它不起作用。我能指出正确的方向吗？

当前的JS小提琴：http://jsfiddle.net/ctalke/27no66rm/

＆＃13;

//==================================== 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 ==================================//

＆＃13;

.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;
}

＆＃13;

<!-- 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>

＆＃13;

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 ==================================//

Answer 2

我可能会误读你的问题，但是你是否在询问循环所有元素？如果您尝试对1个以上的元素做某事，请尝试这样的事情

const arrayOfElements1 = document.querySelectorAll('yourCSSselectorGoesHere');
const arrayOfElements2 = document.querySelectorAll('yourCSSselectorGoesHere');
for (let i = 0; i < arrayOfElements.length; i += 1) {
    arrayOfElements1[i].doStuff;
}

在上面的doStuff中，您可以执行arrayOfElements1[i].innerHTML / arrayOfElements2[i].innerHTML * 100。我不清楚你需要什么，所以如果我误解了，请告诉我。

Answer 3

只需将代码放入for循环中。

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

  barvs[index].style.width = Math.round(e) + '%';
  barvs[index].innerHTML = Math.round(e) + '%';

  var a1 = barvs[index];
  if (e < 50) {
    a1.className += " green";
  } else if (e < 99) {
    a1.className += " yellow";
  } else {
    a1.className += " red";
  }
}

通过多个元素重复脚本

3 个答案: