javascript - 将 jQuery 代码转换为纯 JavaScript 不显示任何内容

Question

我正在尝试转换这一小段代码:

$(document).ready(function () {
    $('.slider').slider();
});

到纯 JavaScript 代码。我点击了一些链接，并尝试以两种方式重写上面的代码:

第一个选项:

var slider2 = document.querySelectorAll(".slider");

window.onload = slider2.slider;

第二个选项:

var slider2 = document.querySelectorAll(".slider");

document.addEventListener("DOMContentLoaded", function() {
    slider2.slider();
});

在这两种情况下我都没有收到任何错误，但它没有显示任何内容......

还有其他想法吗？ :(

更新:好的，出于某种原因，DOM 事件的选项对我不起作用...

这是我想出的解决问题的代码:

var elems = document.querySelectorAll('.slider');

var instances = M.Slider.init(elems, {
    inDuration : 275
});

window.addEventListener("load", instances, false);

最初我只使用了 window.onload = instances，但我在另一个 JS 文件中使用了相同的逻辑，所以我最终覆盖了另一个事件。在上面的解决方案中，我解决了这个问题。

Answer 1

因此 $('.slider').slider() 与 document.querySelectorAll(".slider") 不同。前者(使用 $)应用任何存在的 jQuery 插件，例如您提到的您正在使用的 Materialize CSS。后者 (document.querySelectorAll) 没有，因为这是一个 native 浏览器函数。

因此，如果您真的想使用 vanilla，则需要查看 Is it possible to use Materializecss without jQuery?