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

Question

我是编码新手。我试图将输入值添加到 givenToDos 数组，将其附加到#to-do-list div，然后还将一个 COMPLETED 按钮附加到每个项目。以下代码是我尝试过的。它仅显示数组中的原始 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>

我做了什么？

• 获取所有代码并粘贴到提交中
• 添加$('#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>