我只能通过 1/4 的测试答案

【问题标题】：I can only get 1/4 tests passing我只能通过 1/4 的测试
【发布时间】：2021-01-11 19:05:41
【问题描述】：

实现 showCustomers 函数，以便将客户呈现为列表项。函数的第一个参数customers 是一个包含name 和email 属性的对象数组。该函数的第二个参数 targetList 是一个无序的 HTML 列表，每个客户都应作为单独的列表项添加到该列表中。

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

function showCustomers(customers, targetList) {
    var ul = document.getElementById('customer');

    for (var i = 0; i < customers.length; i++) {
        var li = document.createElement('li');
        var paraName = document.createElement("p");
        var nameNode = document.createTextNode(customers[i]['name']);
        paraName.appendChild(nameNode);

        var paraEmail = document.createElement('p');
        var emailNode = document.createTextNode(customers[i]['email']);
        paraEmail.appendChild(emailNode);
        li.appendChild(paraName);
        li.appendChild(paraEmail);
        targetList.appendChild(li);

        paraName.addEventListener("click", (e) => {
            let x = e.target.parentElement;
           x.removeChild(x.childNodes[1]);
        })
    }
}

document.body.innerHTML = `
<div>
  <ul id="customers">
  </ul>
</div>
`;
let customers = [{name: "John", email: "john@example.com"},
                 {name: "Mary", email: "mary@example.com"}];
showCustomers(customers, document.getElementById("customers"));

let customerParagraph = document.querySelectorAll("li > p")[0];
if(customerParagraph) {
  customerParagraph.click();
}
console.log(document.body.innerHTML);

我有正确呈现的客户名称。但是点击客户名称显示邮箱，再次点击客户名称隐藏邮箱是错误的。

输出


 <div>
   <ul id="customers">
   <li><p>John</p></li><li><p>Mary</p><p>mary@example.com</p></li></ul>
 </div>

【问题讨论】：

标签： javascript dom event-handling

【解决方案1】：

请尝试以下：

function showCustomers(customers, targetList) {
  var ul = document.getElementById('customer');

  for (var i = 0; i < customers.length; i++) {
    var li = document.createElement('li');
    var paraName = document.createElement("p");
    var nameNode = document.createTextNode(customers[i]['name']);
    paraName.appendChild(nameNode);

    li.appendChild(paraName);
    targetList.appendChild(li);

    paraName.addEventListener("click", (e) => {
        let x = e.target.parentElement;
        if (x.childNodes.length == 1) {
          for (var j = 0; j < customers.length; j++) {
            if (e.target.innerHTML == customers[j]['name']) {
              var paraEmail = document.createElement('p');
              var emailNode = document.createTextNode(customers[j]['email']);
              paraEmail.appendChild(emailNode);
                x.appendChild(paraEmail);
            }
          }
      } else {
        x.removeChild(x.childNodes[1]);
      }
    })
  }
}

【讨论】：