不明白为什么它只将第一个 int 放入 javaScript 中的数组答案

【问题标题】：Don't understand why it only put the first int into array in javaScript不明白为什么它只将第一个 int 放入 javaScript 中的数组
【发布时间】：2020-07-20 09:16:33
【问题描述】：

我想用 Js 创建一个进度条。我正在关注 Cassidy Williams 于 2018 年 9 月 13 日制作的在线演示。链接：https://codepen.io/cassidoo/pen/wEXQaG

我在步骤div元素中添加了更多步骤：

  <div class="steps">
    <div class="step" id="0"></div>
    <div class="step" id="1"></div>
    <div class="step" id="2"></div>
    <div class="step" id="3"></div>
    <div class="step" id="4"></div>
    <div class="step" id="5"></div>
    <div class="step" id="6"></div>
    <div class="step" id="7"></div>
    <div class="step" id="8"></div>
    <div class="step" id="9"></div>
    <div class="step" id="10"></div>
  </div>

但是当我点击第三步时，最后一步的状态被点击了。这个错误有什么问题？另外，这个错误的解决方法是什么？

【问题讨论】：

如果我添加更多步骤，我看不到您提到的行为。我看到每个圆圈之间的线都超出了圆圈，这里需要进行一些 CSS 调整。您能否通过 jsfiddle 分享您的完整代码，以更好地了解您的体验？
如果添加的step Id超过10，就会出现错误。当您点击 3 到 9 之间的圈子 ID 时，会点击圈子 ID（10 甚至更多）。

标签： javascript html progress-bar

【解决方案1】：

David Fontes 的回答只是部分正确。您还需要对 e.id 进行类型转换，以使其正常运行。

所以替换

steps.forEach((e) => {
  if (e.id === stepNum) {
    e.classList.add('selected');
    e.classList.remove('completed');
  }
  if (e.id < stepNum) {
    e.classList.add('completed');
  }
  if (e.id > stepNum) {
    e.classList.remove('selected', 'completed');
  }
});

与

steps.forEach((e) => {
  let t = e.id * 1;
  if (t === stepNum) {
    e.classList.add('selected');
    e.classList.remove('completed');
  }
  if (t < stepNum) {
    e.classList.add('completed');
  }
  if (t > stepNum) {
    e.classList.remove('selected', 'completed');
  }
});

这并没有解决线条问题（蓝线越过最后一个圆圈），这似乎比 JavaScript 更与 CSS 相关。

编辑：

David Fontes 在我进行更正后更新了他的答案，因此他的答案现在修复了所有类型转换。

对于蓝线问题：

将 let p = stepNum * 30; 更改为 let p = stepNum * 10;，其中 10 是移动条的百分比（11 格，因此 10 步为 10%）。

【讨论】：

哦，它也可以解决我的问题。顺便说一句，谢谢你解决了我的问题。

【解决方案2】：

在JS代码的第6行，作者有以下内容：

progress(x.target.id);

替换为：

progress(+x.target.id);

在第 14、18 和 21 行，做同样的事情。

steps.forEach((e) => {
    if (+e.id === stepNum) { // <-- here
      e.classList.add('selected');
      e.classList.remove('completed');
    }
    if (+e.id < stepNum) { // <-- here
      e.classList.add('completed');
    }
    if (+e.id > stepNum) { // <-- and here
      e.classList.remove('selected', 'completed');
    }
});

HTML id 是一个字符串，因此需要强制转换。条件不正常是因为使用了字符串比较而不是数字比较。通过将字符串转换为数字，它可以按预期工作。

【讨论】：

哦，我认为ID是整数。但是在 x.target.id 之前添加“+”之后。最终结果与原始结果不同。我点击的第一个圈子，没有任何反应。
我已经更新了我的答案，我还需要在 if 语句中转换 id。现在就试试。关于 id 是数字，它们是数字格式的字符串。 HTML 属性始终是字符串，因此当您将它们提取到 JS 代码中时，可能需要进行一些转换。
感谢您解决了我的问题。

【解决方案3】：

如果您的代码不是“硬编码”，那么修复行将无济于事，我的意思是：

let p = stepNum * 10;

因此，这里更好的解决方案是将 .progress 和 .steps 用另一个 div 包装，并赋予该 div 相对位置。

【讨论】：