javascript - javascript 中 ID 和类的使用问题

Question

我是 Javascript 新手，目前正在抓狂，因为我不知道如何解决问题!

我试图让一个圆圈根据从我的“段落标签”获得的数字来改变其颜色。当我在页面上使用 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，我想将代码切换为使用“class”。

如果我将所有 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!");
})();