Question

我还是JavaScript的新手，如果其中任何一个不清楚，我深表歉意-我得到了以下代码，该代码根据JSON数组（rolesData）动态创建一个列表，并将“ roles”中的数据放入列表中（请参阅以下数组中的几个示例）。随机确定将哪些特定角色放入列表中（即document.body.appendChild(createList(rolesData[~~(Math.random()*rolesData.length)].roles));可以正常工作，并且按预期方式创建列表（即，如果随机数为0，则将“ John Smith”的角色添加到列表中）列表。

但是，我现在想创建一个添加的功能，以便可以更改列表（例如，通过单击按钮），并且列表中具有不同名称的数据也可以更改（即，如果随机数更改为1然后将添加“玛丽·泰勒”的角色）。我的问题是，列表中每个人的角色数量都不相同-因此，约翰有3个角色，玛丽有4个角色，依此类推。

因此，我在努力思考如何创建一个可以更改列表的函数，该函数还可以更改列表中的项数。我曾尝试通过向在初始表中创建的每个列表项分配一个ID，然后执行getElementById并以这种方式进行更改来做到这一点-显然，问题在于如果在初始表中仅创建3个列表项表格，则只会创建3个ID-因此，如果尝试添加第四个项目，就没有ID可以获取（而且我敢肯定，这种方法也存在其他问题）。因此，我对如何做到这一点有些困惑-任何帮助将不胜感激。

const rolesData = [{
   "name": "John Smith",
   "title": "project manager",
   "roles": ["Planning and Defining Scope", "Activity Planning and Sequencing", "Resource Planning"],
  },
  {
   "name": "Mary Taylor",
   "title": "test analyst",
   "roles": ["design and develop tests for software and systems to detect faults", "analyse the defects and bugs to identify what is causing them", "track the success of the solutions", "keep software and systems documentation up to date"],
  }
  ];

const createList = data => {
  const list = document.createElement("ul");

 data.forEach(e => {
   const listItem = document.createElement("li");
   listItem.innerHTML = e;
   list.appendChild(listItem);
 });

 return list;
};

document.body.appendChild(createList(rolesData[~~(Math.random()*rolesData.length)].roles));

（这是我一直在尝试的方法，显然不起作用）。

const createList = data => {
const list = document.getElementById("featuredList");
count = 1;
data.forEach(e => {
 const listItem = document.getElementByID("listItem" + count);
 listItem.innerHTML = e;
 list.appendChild(listItem);
 count++;
});
return list;
};

Answer 1

删除列表并创建一个新列表，而不是替换其内容

更改通过JSON数组创建的列表中的项目

1 个答案: