不明白为什么它只把第一个 int 放入数组 javaScript

Question

我想用Js制作一个进度条。我正在关注 Cassidy Williams 于 2018 年 9 月 13 日制作的在线演示。 Link: 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>

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

Answer 1

在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 是一个字符串，所以需要强制转换。条件行为不正常是因为使用了字符串比较而不是数字比较。通过将字符串转换为数字，它按预期工作。

Answer 2

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 div，因此 10 步使10%).

Answer 3

如果您的代码不是 'hardcoded'，那么修复行将无济于事，我的意思是：

let p = stepNum * 10;

所以，这里更好的解决方案是用另一个 div 包装 .progress 和 .steps 并给那个 div 相对位置。

不明白为什么它只把第一个 int 放入数组 javaScript

Don't understand why it only put the first int into array in javaScript

html

javascript

progress-bar