"編輯按鈕 jquery 功能"

Question

如何使用 jquery 通過編輯按鈕使我的待辦事項列表能夠編輯輸入？ 這是一個待辦事項列表，我希望用戶能夠編輯輸入提前謝謝

<header data-role="header">
  <h1>To Do List</h1>
  <a href="#">Home</a>
</header>

<div role="main" class="todo-     container">
  <div class="input">
    <input type="text" class="note" placeholder="Input new note..">
    <button id="addButton">Add</button>
  </div>

  <ul class="todo-list">
    <li>
      <div class="button-center">
      </div>
    </li>
  </ul>

  <script>
    $(document).ready(function() {
      $('#addButton').click(function() {
        var task = $(".note").val();
        $(".todo-list").append(`<li>     <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button>   </div></li>`);
        $(".note").val("");
      });
      $(document).on('click', '.deleteButton', function() {
        $(this).parent().parent().remove();
      });
    });
    $('#editButton').click(function() {});
  </script>

Answer 1

我做了這樣的事情：例子<\/a>

用戶將能夠通過雙擊文本進行編輯，並且將顯示一個輸入字段。 用戶完成編輯后可以單擊編輯按鈕，文本將被更新。

JS<\/strong>

$('#addButton').click(function() {
 var task = $(".note").val();
 $(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div 
 class="button-center"><button class="deleteButton">Delete</button><button 
 class="editButton">Edit</button>   </div></li>`);
 $(".note").val("");
});

$(document).on('click', '.deleteButton', function() {
 $(this).parent().parent().remove();
});

$(document).on('dblclick', '.task', function() {
 var task = $(this).text();
 $(this).text('');
 $(this).append(`<input type="text" value="${task}" />`);
});

$(document).on('click', '.editButton', function() {
 var task = $(this).parents().siblings('span').children('input').val();
 $(this).parents().siblings('span').remove('input');
 $(this).parents().siblings('span').text(task);
});

Answer 2

我已經修改了您的代碼並添加了編輯功能。 它應該像你期望的那樣工作，所以我不會多說。 請試試這個