javascript - 如何在 Material Design Lite 工具提示中使用类而不是 ID？

Question

我需要为 data-mdl-for 使用 class 而不是 id 来在 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>

这工作正常，但我需要使用多个上述按钮元素。有没有可能的方法将按钮的 id 和 data-mdl-for 转换为 Javascript 并使用 querySelector 或 getElementsByClassName 之类的东西 一个有效的工具提示？

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

我知道这是一个错误的脚本，但这可以解释我真正需要的东西。我需要使用 JavaSript 提供有效的工具提示，而不是使用 data-mdl-for 或在 JavaScript 中指定 data-mdl-for 并使用按钮类。

Answer 1

//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>