Question

我想在Material Design Lite中使用MDL Stepper。

HTML：

<ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="demo-stepper-linear">
  <li class="mdl-step">
    <span class="mdl-step__label">
              <span class="mdl-step__title">
                <span class="mdl-step__title-text">Title of step 1</span>
    </span>
    </span>
    <div class="mdl-step__content">
    </div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Title longer than it should be</span>
    </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
  <li class="mdl-step">
    <span class="mdl-step__label">
          <span class="mdl-step__title">
            <span class="mdl-step__title-text">Title of step 3</span>
    </span>
    </span>
    <div class="mdl-step__content"></div>
    <div class="mdl-step__actions">
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
            Continue
          </button>
      <button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
            Cancel
          </button>
    </div>
  </li>
</ul>

JavaScript：

<script type="text/javascript">
      var stepperElement = document.querySelector('ul.mdl-stepper');
      var Stepper;

      // Check if MDL Component Handler is loaded.
      if (typeof componentHandler !== 'undefined') {
        // Get the MaterialStepper instance of element to control it.
        Stepper = stepperElement.MaterialStepper;
        // Moves the stepper to the next step for test.
        Stepper.next();
      } else {
        // Material Design Lite javascript is not loaded or for another
        // reason MDL Component Handler is not available globally and
        // you can't use (register and upgrade) Stepper component at this point.
      }
</script>

我无法运行它，因为我遇到了错误...

未捕获的TypeError：无法读取未定义的属性“ next”

如何使用此功能？

Answer 1

可能是您的js在DOM完成加载之前正在运行用下面的代码包装您的代码，它将等到dom完成后

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        var stepperElement = document.querySelector('ul.mdl-stepper'); var Stepper;

      // Check if MDL Component Handler is loaded.
      if (typeof componentHandler !== 'undefined') {
        // Get the MaterialStepper instance of element to control it.
        Stepper = stepperElement.MaterialStepper;
        // Moves the stepper to the next step for test.
        Stepper.next();
      } else {
        // Material Design Lite javascript is not loaded or for another
        // reason MDL Component Handler is not available globally and
        // you can't use (register and upgrade) Stepper component at this point.
      }
    }
}

mdl-stepper Stepper.next（）抛出TypeError

1 个答案: