Question

我需要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>

这很好但我需要使用多个上面的按钮元素。有没有办法将此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>

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

1 个答案: