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>

Tha布局看起来很棒。按下按钮时，它会使用以下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事件做出反应，假设某些后台进程更新了组件。虽然我不知道基本的工作原理，但似乎你可以通过以下方式直接设置进度：

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

addEventListener在addClass中使用时不起作用

1 个答案: