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

Posted 2023-05-08

【中文标题】使用 jQuery 将新列表项添加到待办事项列表？

【英文标题】：Adding a new list item to a todo list using jQuery?

【发布时间】：2021-06-25 04:45:27

【问题描述】：

我是编码新手。我试图将输入值添加到 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>

【问题讨论】：

Giventodos 应该是一个变量，而不是一个常量，如果你想操作它的话。将 const 更改为 car

真实的会随着新值而改变，所以在这个例子中是可以的 - look here

【参考方案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>

【讨论】：

试试这个不是一个很好的解释，请始终尝试解释你的答案。

【参考方案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>

【讨论】：

谢谢，我用了 $('.to-do-item').remove();相反，因为我忘了提到在#to-do-list 中有一个带有文本“需要完成的事情”的