Question

帮我从NodeList的Item中获取单个值。我想将两个NodeList映射到对象数组。我想创建一个窗体，该窗体使用将新作者的名字和姓氏行动态放置到窗体中的函数将新书添加到库中。但是无法理解如何将其他行中的输入传递给JSON对象。我只找到了这种解决方案，但无法理解如何从querySelectorAll NodeList中获取单个值，然后创建一个author对象。我想要这样的物体：

    const newBook = {
        title: 'title',
        year: '2000',
        authors: [{
               firstName: 'Name',
               lastName: 'LastName'
}]
    };

我想要一个这样的物体：

function Author(firstName, lastName) {
    this.firstname = firstName;
    this.lastname = lastName;
}
const authors = Object.create(null);
const $author = document.querySelector('#formAuthor');
const firstName = [$author.querySelectorAll("#firstName")];
const lastName = [$author.querySelectorAll('#lastName')];
for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i], lastName[i]); //here

    authors.push(author);

这是HTML

<div id="createForm" class="modal modal-fixed-footer">
    <div class="modal-content">
        <h4>Add new book</h4>
        <div class="row">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col s6">
                        <input placeholder="title" id="formTitle" type="text" class="validate">
                        <label for="formTitle">title</label>
                    </div>
                    <div class="input-field col s6">
                        <input id="formYear" type="text" class="validate">
                        <label for="formYear">year</label>
                    </div>
                    <div class="input-field col s6 author" id="formAuthor">
                    </div>
                    <div class="input-field col s6 genre" id="formGenre">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <div class="valign-wrapper leftBottom">
        <a class="waves-effect waves-light btn-small" id="createBook">Save</a>
        </div>
            <div class="fixed-action-btn">
            <a class="btn-floating btn-large red">
                <i class="large material-icons">mode_edit</i>
            </a>
            <ul>
                <li><a class="btn-floating blue" id="addAuthor"><i class="material-icons">person_add</i></a></li>
                <li><a class="btn-floating yellow darken-1" id="addGenre"><i class="material-icons">library_books</i></a></li>
            </ul>
        </div>
    </div>
</div>

添加其他行

function onCreateBookAddAuthorRow() {
    let $authorRow = document.createElement('div');
    let count = $author.childElementCount;
    $authorRow.className = 'authorRow';
    $authorRow.innerHTML = `<div class="row" id="authorRow-${count}">
        <div class="input-field col s6">
          <input id="firstName" type="text" class="validate">
          <label for="firstName">First Name</label>
        </div>
        <div class="input-field col s6">
          <input id="lastName" type="text" class="validate">
          <label for="lastName">Last Name</label>
        </div>
        <a class="waves-effect waves-teal btn-flat" id="deleteAuthor-${count}">delete</a>
      </div>`;
    $author.appendChild($authorRow);

    document.querySelector('#deleteAuthor-' + count).addEventListener('click', function () {
        $author.removeChild($author.lastChild)
    });
}

Answer 1

首先，HTML中不应包含多个具有相同ID的元素

您可以使用Array.from()或散布运算符...将NodeList转换为Array，如下所示

// consider converting the ID to a class like so,
const firstName = Array.from($author.querySelectorAll(".firstName"));
const lastName = Array.from($author.querySelectorAll('.lastName'));

// now if it div you might want to take the innerText or innerHTML to get the values. For input types use .value

for (let i = 0; i < firstName; i++) {
   let author = new Author(firstName[i].innerText, lastName[i].innerText);

如何从NodeList获取单个值

1 个答案: