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关键字的绑定。考虑将其替换为正常功能。

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

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

Answer 2

我不知道您使用async会得到什么。 “正常”功能可以完美地完成工作。

在.append()中固定了一些错字...

function addPhone(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>
  `);
}

$(document).on('click', '#submit', function(){
  const phoneArray = [];
  $('.phone-div').each(function(i){
    console.log($(this).find('.type').val());
    console.log($(this).find('.detail').val());

    phoneArray.push({
      type: $(this).find('.type').val(),
      detail: $(this).find('.detail').val(),
    })
  });
  console.log(phoneArray);
});

$("#add").on("click",function(){
  // just for the demo... Since I can't know where this object comes from...
  var phone = {type:"cellular",detail:"1-888-555-5555"}
  addPhone(phone);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="phone-list"></div>
<button id="add">Add</button>
<button id="submit">Submit</button>

Answer 3

可能是因为您使用的是箭头功能，而this并未引用该元素。

将箭头函数更改为use function关键字，或使用each回调的第二个参数在上下文中获取当前的element：

$(document).on('click', '#submit', async () => {
    const phoneArray = [];
    $('.phone-div').each((index, element) => {
        phoneArray.push({
           type: $(element).find('.type').val(),
           detail: $(element).find('.detail').val(),
         })
    });
});

在each（）中访问div内的输入值

3 个答案: