addEventListener在addClass中使用时不起作用

Question

我编写了以下HTML，使用作为进度条：

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
        <div id="stepProgress" class="mdl-progress mdl-js-progress"></div>
    </div>
</div>
<div class="mdl-grid">
    <div id="step1-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
        <h5 class="text-center">Step 1</h5>
    </div>
    <div id="step2-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
         <h5 class="text-center">Step 2</h5>
    </div>
    <div id="step3-title" class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone steps">
         <h5 class="text-center">Step 3</h5>
    </div>
</div>

<div id="firstnext" class="box-style">Next</div>

布局看上去很棒。当按下按钮时，它会使用以下jQuery更改每个步骤的背景，以指示用户所处的步骤：

jQuery('#step1-title').addClass('box-active');
jQuery('#firstnext,#step2-title').click(function(){

    jQuery('#step1').hide();
    jQuery('#step2').show();
    jQuery('#step3').hide();
    jQuery('#step1-title').removeClass('box-active');
    jQuery('#step2-title').addClass('box-active');
    jQuery('#step3-title').removeClass('box-active');

});

我正在尝试更新进度条，但当按下next按钮时，以下内容无法工作：

document.querySelector('#stepProgress').addEventListener('mdl-componentupgraded', function() {
this.MaterialProgress.setProgress(33);
});

(来自谷歌的网站：https://getmdl.io/components/#loading-section)

我创建了以下jsFiddle https://jsfiddle.net/storm/7a84vqz7/

Answer 1

提供的链接上的示例代码对mdl-componentupgraded事件作出反应，假设某些后台进程更新组件。虽然我不知道基本的工作原理，但您似乎可以通过以下方式直接设置进度：

document.querySelector('#stepProgress').MaterialProgress.setProgress(33);