javascript - 在 addClass 中使用时 addEventListener 不起作用

Question

我编写了以下 HTML，使用 Material Design Lite 作为进度条:

<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');

});

我现在正在尝试更新进度条，但按下下一个按钮时以下内容不起作用:

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

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

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

Answer 1

所提供链接上的示例代码对 mdl-componentupgraded 事件使用react，假设某些后台进程更新了组件。虽然我不知道底层的工作原理，但似乎您可以直接通过以下方式设置进度:

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