javascript - 进度条没有正确前进

Question

我开发了一个进度条，当点击它时，每 25 次前进一次，从 0 开始。

加载对象时，其中一些已经包含一些进度。我的问题是，在第一次单击前进栏时，有时它会丢失，我不知道为什么会这样。例如，进度为 75%，当我单击它以推进到 100% 时，它会无缘无故地变为 25%。有谁知道为什么会这样？

代码

upd(event, data) {
    let percentage: number = Math.floor(
      (event.layerX / (event.target.offsetWidth - 3)) * 100
    );

    const previous = parseInt(this.percentage);
    if (previous > percentage) {
      percentage = previous - 25;
    } else {
      percentage = previous + 25;
    }

  }

标签： javascriptangulartypescript

Answer 1

这里的问题是您在许多滑块之间共享一个类属性。percentage

这是固定演示：https ://stackblitz.com/edit/angular-p2t9cn

您必须将内容与特定滑块的数据进行比较，而不是共享一个类属性。

因此，修复演示的选项之一是更改parseInt(this.percentage)为data.data.progressinupdateSlider方法。

另外，请小心使用parseInt:) 您可以查看以下答案：Problems with javascript "parseInt()"。