客户名单挑战(TestDome)

Question

我正试图从TestDome解决这个挑战，我需要一些帮助。我真的不明白我必须如何切换电子邮件以及如何将项目附加到DOM。。。！！请不要香草JS！！

实现showCustomers功能，使其将客户呈现为列表项。函数的第一个参数customers是一个具有名称和电子邮件属性的对象数组。函数的第二个参数targetList是一个无序的HTML列表，每个客户都应该作为一个单独的列表项添加到该列表中。

名称和电子邮件属性应作为两段添加到列表项中。首先，电子邮件段落元素不应该出现在DOM中。应在单击名称后将电子邮件段落元素添加到DOM中，并在再次单击名称时将其从DOM中删除。

例如，以下代码：

document.body.innerHTML = `
<div>
<ul id="customers">
</ul>
</div>
`;
let customers = [{name: "John", email: "[e-mail]"},
{name: "Mary", email: "[e-mail]"}];
showCustomers(customers, document.getElementById("customers"));
let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
customerParagraph.click();
}
console.log(document.body.innerHTML);
Should render:
<div>
<ul id="customers">
<li>
<p>John</p>
<p>[e-mail]</p>
</li>
<li>
<p>Mary</p>
</li>
</ul>
</div>

这是我的代码

function showCustomers(customers, targetList) {
customers.forEach(item =>{
let res = `<li>
<p> ${item.name}</p>;
<p> ${item.email}</p>;
</li>;
targetList.innerHTML = targetList.appendChild(res);

})
}

https://www.testdome.com/questions/javascript/customer-list/49798?visibility=3&skillId=2

Answer 1

替换行

targetList.innerHTML = targetList.appendChild(res);

带有

CCD_ 2。

基本上有两种添加元素的方法：

• 使用原始字符串增加innerHTML内容
• 将子项附加到DOM元素

在您的情况下，res是一个字符串，因此您不能使用targetList.appendChild

Answer 2

既然你问了："单击名称后应将电子邮件段落元素添加到DOM中，再次单击名称时应将其从DOM中删除"。

创建list el，创建p el，在p el上创建事件侦听器，将电子邮件附加到子元素

将您的代码替换为

customers.forEach((item) => {
const li = document.createElement("li");
const name = document.createElement("p");
name.textContent = item.name;
name.style.cursor = "pointer";
name.addEventListener("click", (event) => {
const parent = event.target.parentElement;
if (parent.children.length == 1) {
const email = document.createElement("p");
email.textContent = item.email;
parent.appendChild(email);
} else {
parent.lastChild.remove();
}
});
li.appendChild(name);
targetList.appendChild(li);
});

Answer 3

function showCustomers(customers, targetList) {
customers.forEach((customer, index) => {
const node = document.createElement('li');
let nameEl = document.createElement('p');
let emailEl = document.createElement('p');
nameEl.innerText = customer.name;
emailEl.innerText = customer.email;
node.appendChild(nameEl);
nameEl.addEventListener('click', function() {
node.contains(emailEl) ? node.removeChild(emailEl)  : 
node.appendChild(emailEl);
});
targetList.appendChild(node)
});
}