MDL 升级每个选项卡上的所有动态列表元素

Question

我有 4 个 mdl 选项卡，我在每个选项卡中动态创建一个 mdl 卡列表。每张卡片都有一个像这样创建的 mdl-menu:

// job settings dropdown :
settingsButton.setAttribute('id', 'jobSettings');
var jobUl = document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
jobUl.setAttribute('for', 'jobSettings');
var jobLi = document.createElement('li');
var jobLi2 = document.createElement('li');
var jobLi3 = document.createElement('li');
jobLi.className = 'mdl-menu__item';
jobLi2.className = 'mdl-menu__item';
jobLi3.className = 'mdl-menu__item';
jobLi.textContent = 'Edit';
jobLi2.textContent = 'Delete';
jobLi3.textContent = 'Pay';
jobUl.appendChild(jobLi);
jobUl.appendChild(jobLi2);
jobUl.appendChild(jobLi3);

它会出现在 html 中，如下所示：

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-right">
  <li class="mdl-menu__item">Edit</li>
  <li class="mdl-menu__item">Delete</li>
  <li class="mdl-menu__item">Pay</li>

然后我 componentHandler.upgradeDom(); 希望升级每个无序列表 (ul) 中的 mdl-menu 项目。

这似乎只适用于整个网站中的一个列表元素 (li)。它不适用于任何其他选项卡上的任何其他元素。如何让我的 mdl-menu 在每个动态创建的 ul 中的每个动态创建的列表元素上工作？

Answer 1

问题可能是您在多个菜单元素中复制了 id 值（如果有多个按钮的 id 值与 for 菜单元素上的值）。您可以为 id 和 for 值添加一个数字增量，以确保每个菜单都是唯一标识的。请参阅以下示例。

const fragment = document.createDocumentFragment();
const addCard = (n) => {
  const card = document.createElement('div');
  const menu = document.createElement('div');
  const button = document.createElement('button');
  const icon = document.createElement('i');
  const ul = document.createElement('ul');
  card.className = 'mdl-card mdl-shadow--2dp';
  menu.className = 'mdl-card__menu';
  button.id = `menu${n}`;
  button.className = 'mdl-button mdl-js-button mdl-button--icon';
  icon.className = 'material-icons';
  icon.textContent = 'more_vert';
  ul.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
  ul.setAttribute('for', `menu${n}`);
  fragment.appendChild(card);
  card.appendChild(menu);
  menu.appendChild(button);
  button.appendChild(icon);
  menu.appendChild(ul);
  for (const action of ['Action 1', 'Action 2', 'Action 3']) {
    const li = document.createElement('li');
    li.textContent = action;
    li.className = 'mdl-menu__item';
    ul.appendChild(li);
  }
};

for (let i = 0; i < 2; i++) {
  addCard(i);
}

document.querySelector('#container').appendChild(fragment);
componentHandler.upgradeDom();

.mdl-card {
  margin: 8px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Lite Cards / Menus</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  </head>
  <body>
    <div id="container"></div>    
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  </body>
</html>

MDL 升级每个选项卡上的所有动态列表元素

MDL upgrade all dynamic list elements on each tab

html

javascript

material-design

material-design-lite