时间戳

首页 > 解决方案 > MaterializeCSS 中的 getInstance 方法是什么

javascript - MaterializeCSS 中的 getInstance 方法是什么

问题描述

我只花了几个小时使用MaterializeCSS框架，我发现代码我觉得我看不懂，文档中可能没有解释，你能给我解释一下getInstance()方法的功能是什么?

let elems = document.querySelectorAll(".sidenav");
M.Sidenav.getInstance(elems).close();
M.Sidenav.init(elems);

标签： javascripthtmlcssdommaterialize

解决方案

getInstance返回组件及其可用的所有数据 - 我们可以在其上使用提供的方法，这些方法因组件而异。

#1 var elems = document.querySelectorAll('.sidenav');

这将选择所有具有 sidenav 类的元素。如果我们 log elems，我们会看到它是一个节点列表。您可能只有一个sidenav，但您可以想象，如果正在查看选择输入，我们可能会在页面上拥有多个。

#2 var instances = M.Sidenav.init(elems) ;

这将初始化组件。在我的代码笔中，我记录instances[0]了 - 请记住，我们可能选择了多个元素，因此我们需要通过节点列表索引访问它们。[0]返回第一个实例，或者在这种情况下返回第一个 sidenav。

假设您有多个 sidenav，并且您想在其中一个 sidenav 上运行一个方法，比如打开它。为此，我们需要获取特定实例。所以我们可以使用节点列表索引 - instances[0].open()- 或者，我们可以更明确：

#3 var elem = document.querySelector('#mobile-demo') ;

这会通过 ID 获得一个 sidenav（注意使用 ofquerySelector而不是querySelectorAll）。

#4 var instance = M.Sidenav.getInstance(elem);

这将获取特定实例，如果我们查看日志instance，我们可以看到它与 using 相同instances[0]。

我们现在可以运行instance.open()，或者通过检查返回的对象来获取各种数据。日志instance.options显示用于初始化的选项——在这种情况下没有——所以我们看到返回的默认值。

检查codepen并查看日志。

推荐阅读