如何在Material Design Lite中使用class而不是ID

How to use class instead of ID for Material Design Lite tooltip?

本文关键字：class ID Material Design Lite      更新时间：2023-09-26

我需要采取class而不是id的data-mdl-for在JavaScript中使用多个工具提示。我的工具提示按钮将由JSON生成。

<button id="tooltip" class="mdl-button mdl-js-button mdl-button--icon">
    <i class="material-icons lighticon">content_copy</i>
        <div class="mdl-tooltip mdl-tooltip--left" data-mdl-for="tooltip">
          Copy
        </div>
</button>

这工作得很好，但我需要使用多个以上按钮元素。是否有一种可能的方法来转换这个按钮和data-mdl-for的id到Javascript，并使用像querySelector或getElementsByClassName的工作工具提示?

var a = document.querySelector('.mdl-button');
a.data-mdl-for = "tooltip"

我知道这是一个错误的脚本，但这可以解释我真正需要什么。我需要一个工作的工具提示与javascript，而不是使用data-mdl-for或指定data-mdl-for在javascript和使用按钮类。

//Get list
var mdlButtons = document.querySelectorAll(".mdl-button");
//Iterate over list
for (var i = 0; i < mdlButtons.length; i++) {
  //find child tooptip
  var child = mdlButtons[i].querySelector(".mdl-tooltip");
  if (child === null) {
    continue;
  }
  //Modify list
  child.setAttribute("data-mdl-for", mdlButtons[i].getAttribute("id"));
  console.log(child);
}
//Show a list of ".mdl-button" where we can see it has been modified
console.log(
  document.querySelectorAll(".mdl-button")
);
<button id="tooltip-1" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>
<button id="tooltip-2" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>
<button id="tooltip-3" class="mdl-button mdl-js-button mdl-button--icon">
  <i class="material-icons lighticon">content_copy</i>
  <div class="mdl-tooltip mdl-tooltip--left">
    Copy
  </div>
</button>

相关文章：