0

Есть Input через который добавляются элементы списка с данными. Как сделать, чтобы после ввода N-количества элементов, эти элементы без вмешательства пользователя добавились в массив.

$('#new').keyup(function(e){ console.log(e.keyCode);

if (e.keyCode==13){
    $('#main').show();
    $('#footer').show();
    $('#list').append('<li>\
            <div class="task">\
              <label class="text"><input class="toggle" type="checkbox">'+$(this).val()+'</label>\
                <button class="destroy"></button>\
            </div>\
       </li>');
    // Очистка Input
    $('#new').val('');
}
});

// Добавление в массив

$('li').ready( function () {
   var tasks = [];
   $('label.text').each(function() {
      tasks.push($(this).text());
   })
});
8
  • Вам нужно чтобы при каждом добавлении li, в массив добавлялся текст из добавленного label?
    – user207618
    Commented 12 мар. 2017 в 17:23
  • да, чтобы при добавлении 'li' добавлялся текст из 'label'
    – Imp3l
    Commented 12 мар. 2017 в 17:26
  • А почему бы при создании не добавлять текст?
    – user207618
    Commented 12 мар. 2017 в 17:27
  • не совсем понял, что вы имеете ввиду
    – Imp3l
    Commented 12 мар. 2017 в 17:28
  • Когда Вы создаёте li в обработчике keyup, добавляйте сразу и в массив нужный текст.
    – user207618
    Commented 12 мар. 2017 в 17:29

1 ответ 1

0

let tasks = [];

$('#new').keyup(function(e) {
  if (e.keyCode == 13) {
  	let $this = $(this);
    $('#list').append('<li>\
              <div class="task">\
                <label class="text"><input class="toggle" type="checkbox">' + $this.val() + '</label>\
                  <button class="destroy">Destroy</button>\
              </div>\
         </li>');
         
    tasks.push($this.val());
    // Очистка Input
    $('#new').val('');
  }
});

// Для демонстрации; нажмите кнопку, чтобы увидеть все задачи
$('#showTasks').on('click', function(){
	console.info(`Your tasks: %s`, tasks.toString());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='new' /> | <input type='button' id='showTasks' value='Показать задачи' />
<br />
<ul id='list'></ul>

2
  • как можно реализовать, чтобы при нажатии на кнопку Destroy, удалялся необходимый элемент массива
    – Imp3l
    Commented 12 мар. 2017 в 18:37
  • @LoranDeMarcus, это уже совсем другая история, т. е. вопрос.
    – user207618
    Commented 12 мар. 2017 в 18:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.