是否使用jQuery将新列表项添加到待办事项列表？

Question

我是个编程新手。我尝试将输入值添加到givenToDos数组中，将其添加到# to -do-list div中，然后将完成按钮添加到每个项目中。下面的代码是我尝试过的。它只显示数组中的原始4个项目。我被困在这里，任何帮助都将不胜感激。

​

$(() => {

const givenToDos = [
  'todo1',
  'todo2',
  'todo3',
  'todo4',
];




  $('#submit').on('click', function (e) {

    e.preventDefault();
    const $input = $('#input-box');
    const $newTodo = $input.val();
    givenToDos.push($newTodo);
    
    $input.val('');

  });


  for (let i = 0; i < givenToDos.length; i++) {

    const $given = $(
      `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
    );
    $('#to-do-list').append($given);
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

​

Answer 1

试试这个

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='to-do-list'></div>
<hr>
<input type="text" id="input-box">
<button id="submit">Submit</button>
<style>
    .to-do-item {
        line-height: 25px;
        margin-top: 10px;
    }
    .to-do-item button {
        margin-left: 5px;
    }
</style>

<script>
    let givenToDos = [
        'todo1',
        'todo2',
        'todo3',
        'todo4',
    ];

    $(document).ready(function() {
        for (let i = 0; i < givenToDos.length; i++) {
            $('#to-do-list').append('<div class="to-do-item" ><strong>'+givenToDos[i]+'</strong><button class="completed">COMPLETED</button></div>');
        }

        $('#submit').on('click', function(e) {
            e.preventDefault();
            const $input = $('#input-box');
            const $newTodo = $input.val();
            givenToDos.push($newTodo);

            $('#to-do-list').append('<div class="to-do-item" ><strong>'+$newTodo+'</strong><button class="completed">COMPLETED</button></div>');
            $input.val('');
        });

    });
</script>

​

Answer 2

您必须将所有的for和append放入submit中，这样当它们出现时，submit数组将“重新循环”并将append转换为to-do-list

​

$(() => {

  const givenToDos = [
    'todo1',
    'todo2',
    'todo3',
    'todo4',
  ];




    $('#submit').on('click', function (e) {

      e.preventDefault();
      const $input = $('#input-box');
      const $newTodo = $input.val();
      givenToDos.push($newTodo);
      $('#to-do-list').html('');
      $input.val('');
      for (let i = 0; i < givenToDos.length; i++) {

      const $given = $(
        `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
      );
      $('#to-do-list').append($given);
    }

    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

​

我做了什么？

• 采用所有代码并粘贴到submit
• Add $('#to-do-list').html('');中，以便在重新提交

时重置列表

如果你想第一次打印默认的列表，也可以在外部使用它

使用函数的示例：

​

$(() => {

    const givenToDos = [
        'todo1',
        'todo2',
        'todo3',
        'todo4',
    ];

    AppendList(givenToDos);


    $('#submit').on('click', function (e) {

        e.preventDefault();
        const $input = $('#input-box');
        const $newTodo = $input.val();
        givenToDos.push($newTodo);
        $('#to-do-list').html('');
        $input.val('');
        AppendList(givenToDos);
    });
    function AppendList(array) {
        let todolist = document.getElementById('to-do-list');
        for (let i = 0; i < array.length; i++) {

            const $given = $(
                    `<div class='to-do-item' >${givenToDos[i]}<br /><button class='completed'>COMPLETED</button></div>`,
                    );
            $(todolist).append($given);
        }

    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='input-box'>
<div id='to-do-list'></div>
<button id='submit'>submit</button>

​