javascript - 无法个性化每个进度条(Vanilla Javascript)

Question

我正在尝试处理一个有 3 个进度条的代码片段，它可以通过 4 个按钮来控制以增加或减少进度条值。 它还具有一个用于在进度条之间切换的选择框。

问题是我无法个性化每个进度条。当我更改第一个选定进度栏中的值时，它按预期工作。当我使用选择框在进度条之间切换时，就会出现问题。

我无法理解为什么它会这样。我提供下面的链接以便更好地理解。

场景:当您第一次从选择框中选择进度条时，它会正常工作。当您选择另一个进度条时，两个进度条都会生效。

我希望我能够清楚地指出问题。

我在下面发布了 JavaScript 代码。 Click here获取完整代码。

const progressBars = document.getElementsByClassName('progress-bar'),
    buttons = document.getElementsByClassName('btn'),
    progressView = document.getElementsByClassName('percent'),
    pb_1 = progressBars[0],
    pb_2 = progressBars[1],
    pb_3 = progressBars[2],
    selector = document.getElementById('selector');

    function progressControl(selectedValue){
        let selectedPB = eval(selectedValue),
            progressPercent = selectedPB.firstElementChild,
            progress = parseInt(selectedPB.style.width);

        for(let i=0; i<buttons.length; i++){
            let eachBtn = buttons[i],
                controlBtn = parseInt(eachBtn.textContent);

            eachBtn.addEventListener('click', function(){
                progress += controlBtn;
                if(progress > 100){
                    selectedPB.classList.add('progress-bar-danger');
                } else if(progress <= 100 && progress >= 0) {
                    selectedPB.classList.remove('progress-bar-danger');
                } else {
                    progress = 0;
                }
                selectedPB.style.width = progress+'%';
                progressPercent.textContent = selectedPB.style.width;
            });
        }
    }

selector.addEventListener('change', function(){
    let selectedValue = selector.options[selector.selectedIndex].value;
    progressControl(selectedValue);
});

Answer 1

你的问题在这一行

 eachBtn.addEventListener('click', function(){

每次更改选择的值时，都会为旧按钮添加新的单击事件，而不是替换旧的事件监听器。

我能想到两种解决方案:

1. 将 eachBtn.addEventListener 移至函数 ProgressControl 之外，以便仅添加一次 eventListener。
2. 使用 eachBtn.onclick = function(){} 而不是 addEventListener，这样您就可以覆盖eachBtn 的现有点击处理程序，而不是创建新的处理程序。