Question

我正在尝试使用MaterialiseCSS的JavaScript库初始化一些tooltips。我想给它们所有相同的CSS类（.tooltip），这样就可以一次初始化包含该类的每个元素，而不是给它们单独的类并逐个初始化它们。
我目前的代码：

<i class="material-icons tooltip1" data-position="bottom" data-tooltip="Add image">attach_file</i>
<i class="material-icons tooltip2" data-position="bottom" data-tooltip="Edit">edit</i>

我的JS：

var elem1 = document.querySelector('.tooltip1');
var instance1 = M.Tooltip.init(elem1);
var elem2 = document.querySelector('.tooltip2');
var instance2 = M.Tooltip.init(elem2);

我用google搜索和stackoverflowed但它无济于事，因为我只找到了逐个初始化它们的方法。

Answer 1

您可以使用：

.querySelectorAll(selectors)：返回一个静态（非实时）NodeList，表示与指定的选择器组匹配的文档元素列表。

摘录：

document.querySelectorAll('.tooltip').forEach(function(ele, idx) {
    M.Tooltip.init(ele);
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<i class="material-icons tooltip" data-position="bottom" data-tooltip="Add image">attach_file</i>
<i class="material-icons tooltip" data-position="bottom" data-tooltip="Edit">edit</i>

Materialize使用类初始化所有项目

1 个答案: