javascript - 单击编辑按钮时无法显示编辑表单？

Question

我制作了显示联系人详细信息的联系人列表应用程序。默认情况下，它显示 2 个联系方式。在 index.html 中，我制作了 2 个函数，分别称为 showContacts() 和 editContact(id)。

我正在动态填充 div 标签，即 index.html 中的 editcontact 和 contactlist

当我点击编辑按钮时，它应该显示 3 个输入元素以从用户那里获取输入和一个提交按钮我试图实现它(见下面的代码)但是只有搜索栏消失了并且只显示了不应该显示的默认联系人它应该显示编辑表单。

var array = [];

function Person(fullName, number, group) {
  this.fullName = fullName;
  this.number = number;
  this.group = group;
  array.push(this);
}

Person.prototype.getFullName = function() {
  return this.fullName + ' ' + this.number + ' ' + this.group;
}

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");

console.log(array);

document.getElementById("contactlist").innerHTML = '';

function showContacts() {
  for (var i in array) {
    var id = i;
    contactlist.innerHTML +=
      `
            <ul>
            <div>
            <p>Name: ` + p1.fullName + `</p>
            <p>Number: ` + p1.number + `</p>
            <p>Group: ` + p1.group + `</p>
            <button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
            </div>
            `
  }
}

showContacts();

function editContact(id) {
  document.getElementById("search").style.display = 'none';
  document.getElementById("contactList").style.display = 'none';
  document.getElementById("editcontact").style.display = '';
  document.getElementById("editcontact").innerHTML =
    `<div>
            <input type="text"  placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
            <input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
            <input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
            <button type="button" class="btn btn-success">Submit</button>
            </div>`;
}

<div class="header">

  <div id="dropdown">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
              <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">All</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Family</a></li>
      </ul>
    </div>
  </div>

  <div class="title">
    <h2>All Contacts</h2>
  </div>

  <div class="button" id="addButton">
    <p>
      <a href="#">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </a>
    </p>
  </div>

</div>

<div id="search">
  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
                <i class="glyphicon glyphicon-search"></i>
              </button>
      </div>
    </div>
  </form>
</div>

<div id="contactlist">

</div>

<div id="editcontact">

</div>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">

截图:

1) 点击editContact之前:

2) onclick editContact 之后:

现场演示可以在这里看到: https://jsfiddle.net/w2hoqmts/

Answer 1

一些事情。您在 html 中输入了联系人列表(应该是 contactList)。在您的 showContacts 循环中，您将 id 设置为索引并且应该像

function showContacts() {
    for (var i in array) {
        var id = array[i].number;
        document.getElementById("contactList").innerHTML +=
            '<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
            '<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
            '<button type="button" class="btn btn-danger">Delete</button>' +
            '</div>';
    }
}

您的 editContact 方法使用 id 作为索引(如前所述)，这是错误的。你可以做这样的事情(见下面的代码)。当您单击编辑时，我会根据链接提供的唯一 ID 过滤人员数组。

function editContact(id) {
    var obj = array.filter(function (ele) {
        console.dir(ele);
        if (ele.number === id) return ele;

    });
    console.dir(obj);
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactList").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML =
        '<div>'+
        '<input type="text"  placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
        '<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
        '<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
        '<button type="button" class="btn btn-success">Submit</button>'+
       '</div>';
}

我已经根据你自己的做了一个更新的 fiddle https://jsfiddle.net/w2hoqmts/3/