Блог

Главная - Вопросы по программированию - MDL обновляет все элементы динамического списка на каждой вкладке

MDL обновляет все элементы динамического списка на каждой вкладке

#javascript #html #material-design #material-design-lite

#javascript #HTML #материал-дизайн #материал-дизайн-lite

Вопрос:

У меня есть 4 вкладки mdl, где я динамически создаю список карточек mdl в каждой. На каждой карточке есть mdl-меню, созданное следующим образом:

 // 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(); надеюсь обновить элементы mdl-menu в каждом неупорядоченном списке (ul).

Похоже, это работает только для ОДНОГО элемента списка (li) на всем веб-сайте. это не работает для любого другого элемента на любой другой вкладке. Как мне заставить мое mdl-меню работать с каждым динамически создаваемым элементом списка в каждом динамически создаваемом ul?

Ответ №1:

Проблема может заключаться в том, что вы дублируете id значение в нескольких элементах меню (MDL запутается, если есть более одной кнопки со 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>

Комментарии:

1. это сделало это, идентификаторы были одинаковыми. Спасибо! я извлекаю данные из Google firestore, поэтому я просто изменил идентификатор на текущий идентификатор документа. поскольку каждая карточка представляет документ и у каждого документа свой идентификатор, каждый элемент получил свой идентификатор!