javascript - 在 each() 的 div 中访问输入的值

Question

我有一些代码允许用户像这样将新手机添加到列表中

const addPhone = async (phone) => {
  $('.phone-list').append(`
  <div class='phone-div'>
    <table">
    <tbody>
      <tr>
        <td">
            <p>
              <input class='type' type='text' value='${phone.type}'></input>
            </p>
            <p>
              <input class='detail' type='text' value='${phone.detail}'></input>
            </p>
        </td>
      </tr>
    </tbody>
  </table>
</div>);
};

每次用户添加新手机时，都会将一个新的手机 div 添加到列表中并出现在屏幕上。

现在，当用户点击提交按钮时，我想从每个 phone-div 中读取数据，创建一个对象并将该 obj 插入一个数组，然后我可以将其作为 JSON 发送到我的 API 进行处理……目前我我正在尝试使用它

$(document)
  .on('click', '#submit', async () => {
    const phoneArray = [];
    $('.phone-div').each((i) => {
      console.log($(this).find('.type'));// returns undefined
      console.log($(this).find('.detail'));// returns undefined
    });
  });

我怎样才能把类型和细节放在一个obj中，然后把它推到一个数组中，然后我可以像这样将它发送到服务器

phoneArray.push({
    type: $(this).find('.type').val(),
    detail: $(this).find('.detail').val(),
})

Answer 1

您正在 .each() 中使用箭头函数对元素进行处理，它没有自己与 this 关键字的绑定(bind)。考虑将其替换为正常功能。

$(document).on('click', '#submit', async () => {
  const phoneArray = [];

//—————————————————————vvvvvvvv——      
  $('.phone-div').each(function() {
    console.log($(this).find('.type'));
    console.log($(this).find('.detail'));
  });
});