Question

我不确定如何问这个问题。我知道某个地方有答案，但是我一生都无法弄清楚/记住我要达到的目标的术语。

我有用HTML编写的配置文件卡，所有配置文件卡的类名均为“ card”。每张卡中都有两个数字。我希望能够显示一个进度条，该进度条特定于每张个人卡中数字的百分比关系。

所以，我的代码是：

<div class="card">
<p class="nameTitle">NAME 1</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">10</p>
<div class="progBar"></div>
</div>

<div class="card">
<p class="nameTitle">NAME 2</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">5</p>
<div class="progBar"></div>
</div>

我希望达到的目的是让Javascript访问cardTarget的{{1}}和cardCurrent个数字，然后向相同的{{ 1}}，并为nameTitle: NAME 1做同样的事情。

因此progBar中的card等于50％，而nameTitle: NAME 2中的progBar等于25％。

我知道如何访问元素，并且我知道如何进行计算以转换为百分比，我不知道如何（基本上）将元素绑定到nameTitle: NAME1而不影响其他{ {1}}，因为它们都被分配了相同的类名。

希望如此，并在此先感谢您的帮助。

Answer 1

我认为您可能正在寻找Element#querySelector，它可以让您在另一个元素之内中找到一个元素。（还有Element#querySelectorAll可以找到列表。）

例如，要更新这些卡：

document.querySelectorAll(".card").forEach(card => {
    const cardTarget = card.querySelector(".cardTarget");
    const cardCurrent = card.querySelector(".cardCurrent");
    const progBar = card.querySelector(".progBar");
    const percent = (cardCurrent.textContent / cardTarget.textContent) * 100; // Or whatever
    progBar.setSomethingToReflectThatPercentage();
});

实时示例：

setTimeout(() => {
  document.querySelectorAll(".card").forEach(card => {
      const cardTarget = card.querySelector(".cardTarget");
      const cardCurrent = card.querySelector(".cardCurrent");
      const progBar = card.querySelector(".progBar");
      const percent = (cardCurrent.textContent / cardTarget.textContent) * 100; // Or whatever
      progBar.innerHTML = percent;
  });
}, 500);

<div class="card">
<p class="nameTitle">NAME 1</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">10</p>
<div class="progBar">--</div>
</div>

<div class="card">
<p class="nameTitle">NAME 2</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">5</p>
<div class="progBar">--</div>
</div>

旁注：在forEach返回的NodeList上使用querySelectorAll。这是NodeList的相对新增内容；如果发现需要针对目标环境对其进行填充，请参见this answer。

Answer 2

也许这样的事情可以帮助您入门。请注意，偏移量是任意的，我确定您有自己的样式：

for (const e of document.getElementsByClassName("card")) {
  const target = +(e.querySelector(".cardTarget").innerText);
  const current = +(e.querySelector(".cardCurrent").innerText);
  const bar = e.querySelector(".progBar");
  bar.style.width = current / target * 300 + "px";
  bar.innerText = current * 5 / (target * 5) * 100 + "%";  
}

.progBar {
  height: 20px;
  background: #000;
  color: #fff;
}

<div class="card">
  <p class="nameTitle">NAME 1</p>
  <p class="cardTarget">20</p>
  <p class="cardCurrent">10</p>
  <div class="progBar"></div>
</div>

<div class="card">
  <p class="nameTitle">NAME 1</p>
  <p class="cardTarget">20</p>
  <p class="cardCurrent">5</p>
  <div class="progBar"></div>
</div>

Javascript如何访问一个类中的一个类

2 个答案: