Question

我是Java语言的新手，由于某种原因我不知道该如何解决！

我试图根据我从“段落标签”中获得的数字来改变圆圈的颜色。当我在页面上使用ID时，我设法使其正常工作。

(function() {
  var Antal = document.getElementById("myP").innerHTML;

  if (Antal >= 6) {
    document.getElementById("centerbox1").style.backgroundColor = 'Green';
  } else
  if (Antal >= 1 && Antal < 5) {
    document.getElementById("centerbox1").style.backgroundColor = 'yellow';
  } else
  if (Antal <= 0) {
    document.getElementById("centerbox1").style.backgroundColor = 'red';
  }
})();

<div id="centerbox1" style="width:90px; height:90px; border-radius:50%;">
  <div>
    <p id="myP">1</p>
  </div>
</div>

但是由于我需要它一次又一次地重复，所以我不能使用ID，而是想将代码切换为使用“类”。

如果我将所有ID都切换为类，则该代码将不再起作用。

(function() {
  var Antal = document.getElementsByClassName('myP').innerHTML;


  if (Antal >= 6) {
    document.getElementsByClassName('centerbox1').style.backgroundColor = 'Green';
  } else
  if (Antal >= 1 && Antal < 5) {
    document.getElementsByClassName("centerbox1").style.backgroundColor = 'yellow';
  } else
  if (Antal <= 0) {
    document.getElementByClassName("centerbox1").style.backgroundColor = 'red';
  }
});

<div class="centerbox1">
  <div>
    <p class="myP">1</p>
  </div>
</div>

现在，这可能是由于一些非常基本的问题所致，但是我希望有人可以为我提供帮助，因为我对此颇为棘手。

谢谢！

Answer 1

您可以遍历中心框，然后在每个框中找到p标签。根据p标签，您可以为中心框着色。

HTML

<div class="centerbox">
  <div>
    <p>1</p>
  </div>
</div>
<div class="centerbox">
  <div>
    <p>3</p>
  </div>
</div>

CSS

.centerbox {
  width:90px; 
  height:90px; 
  border-radius:50%;
}

JS

let boxes = document.getElementsByClassName("centerbox")
for(let i = 0;i<boxes.length;i++){
  let box = boxes.item(i)
  let content = box.getElementsByTagName("p")[0].innerHTML
  let number = Number(content)
  if(number > 1) {
    box.style.backgroundColor = "green"
  }
}

您实际上并不需要匿名功能，但如果需要，您需要在末尾添加()使其自动执行

(function() {
  console.log("executing!");
})();

Answer 2

这里的解决方案真的很简单。

请记住，在使用getElement s ByClassName时，JavaScript将返回一个数组，因为可以有多个类。解决方案是使用getElementsByClassName[0]，因为这将专门返回数组中具有该类的第一个元素，显然，这也使您可以指定要对其应用哪个类。

javascript

2 个答案: