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(){

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

我可以想到2个解决方案：

将 eachBtn.addEventListener 移到函数progressControl 之外，以便只添加一次eventListener。
使用 eachBtn.onclick = function（）{} 而不是 addEventListener ，以便覆盖eachBtn的现有点击处理程序，而不是创建新的处理程序。

无法个性化每个进度条（Vanilla Javascript）

1 个答案: