Доступ к значению входов внутри div в каждом () - PullRequest
Новая
       10

Доступ к значению входов внутри div в каждом ()

0 голосов
/ 29 января 2019

У меня есть немного кода, который позволяет пользователю добавлять новый телефон в список, например, так: 

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 добавляется в список иПоявляется на экране.

Теперь, когда пользователь нажимает кнопку отправки, я хочу прочитать данные с каждого телефона-деления создать объект с и передать этот объект в массив, который я могу затем отправить в виде 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
    });
  });

Как мне получить это, чтобы поместить тип и детализацию в объект, а затем поместить его в массив, который я затем смогу отправить на серверкак 

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

Ответы [ 3 ]

0 голосов
/ 29 января 2019

Я не знаю, что вы ожидали, используя 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>
0 голосов
/ 29 января 2019

Вероятно, это потому, что вы используете функции стрелок, а this не относится к элементу.

Либо измените функцию стрелки на ключевое слово 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(),
         })
    });
});
0 голосов
/ 29 января 2019

Вы .each() используете элементы со стрелкой, которая не имеет своих привязок к ключевому слову this.Попробуйте заменить его на обычную функцию. 

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

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