Question

我正在尝试使用香草Javascript在圆盘传送带滑块上启用指示器和全角，但失败了。

我已经使用jquery尝试过了，而且效果很好。

这是我的js vanilla脚本：

<field name="email_logo" formElement="fileUploader">

replace with 

<field name="email_logo" formElement="imageUploader">

如何使其工作？

Answer 1

欢迎使用StackOverflow：）

说明

从.init()方法中的docs开始，您必须将要初始化的元素作为第一个参数传递。这就是为什么您的代码不起作用的原因。物化只是不知道您要初始化的什么元素：）

document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
    var options = {
        fullWidth: true, 
        indicators: true
    };
    var elem = document.querySelector('.carousel');
    var instance = M.Carousel.init(elem, options);
});

顺便说一句，由于您同时使用.AutoInit()方法，因此应从AutoInit中排除手动初始化的元素...

从Docs：

忽略元素

如果您希望M.AutoInit()忽略某个元素，则可以将.no-autoinit类添加到该元素，并且不会通过autoinit初始化它。

最终密码

这是您应参考使用的代码。为了完整起见，我从MaterializeCss中添加了其他两个模块（自动完成和下拉），这些模块已使用.AutoInit()初始化。您可以看到，由于.no-autoinit类

，只有 Carousel 不会自动初始化

document.addEventListener('DOMContentLoaded', function() {
  M.AutoInit();

  var options = {
    fullWidth: true,
    indicators: true
  };
  var elems = document.querySelector('.carousel.no-autoinit');
  console.log(elems)
  var instances = M.Carousel.init(elems, options);
})

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">textsms</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">This is auto-initialized!</label>
      </div>
    </div>
  </div>
</div>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>This is auto-initialized too!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

<div class="carousel carousel-slider no-autoinit">
  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
  <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>

如何在实现中使用香草Java脚本初始化轮播全角和指标？

1 个答案:

说明

最终密码