堆棧內存溢出
  簡體   English   中英

如何使用JavaScript編輯數組項目

[英]How to edit array item using javascript

 原文  2019-03-04 09:06:56  2   1    javascript/ html/ css/ arrays

問題描述

我對js很新。 我正在嘗試完成一個待辦事項類的應用程序。 我已經能夠創建，渲染和刪除數組項，但是編輯時遇到了麻煩。

所有這些操作都是通過uuidv4庫完成的，以為創建的每個數組項生成一個ID。

在為數組項選擇了單個ID的情況下，我正在生成動態按鈕，一個用於刪除數組項，另一個用於編輯。

單擊編輯后，我想打開一個包含所選數組項內容的模式。 進行更改后，模態內部的編輯按鈕應調用編輯函數來更新更改，然后重新呈現數組。

我的問題是，單擊“編輯”按鈕時無法打開模式對話框。

這是用於創建必要結構的代碼，但由於它們正常工作，因此不包含用於創建，呈現和刪除的代碼。 

// Generate the DOM structure for a todo

const generateTodoDOM = function(todo) {
  const todoEl = document.createElement("div");
  const checkbox = document.createElement("input");
  const label = document.createElement("label");
  checkbox.appendChild(label);
  todoEl.setAttribute("id", "myTodos");
  const textEl = document.createElement("p");
  const editButton = document.createElement("button");
  editButton.setAttribute("id", "modal-btn");
  const removeButton = document.createElement("button");
  const createDate = document.createElement("p");
  createDate.textContent = `Created: ${dateCreated}`;
  createDate.style.color = "#956E93";

  // Setup the todo text
  textEl.textContent = todo.text;
  todoEl.appendChild(textEl);

  // Setup the remove button
  removeButton.textContent = "x";
  todoEl.appendChild(removeButton);
  removeButton.addEventListener("click", function() {
    removeTodo(todo.id);
    saveTodos(todos);
    renderTodos(todos, filters);
  });

  // TODO: Setup the edit note button
  editButton.textContent = "Edit Todo";
  todoEl.appendChild(editButton);
  editButton.addEventListener("click", function() {

    //Launch the modal
    editModal(todo.id);
  });
  // Setup todo checkbox
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = todo.completed;
  todoEl.appendChild(checkbox);
  checkbox.addEventListener("change", function() {
    toggleTodo(todo.id);
    saveTodos(todos);
    renderTodos(todos, filters);
  });

  todoEl.appendChild(createDate);

  return todoEl;
};

模態的代碼如下： 

//Edit modal todo by id
const editModal = function(id) {
  const todoIndex = todos.findIndex(function(todo) {
    return todo.id === id;
  });
  if (todoIndex > -1) {
  const modal = document.querySelector("#my-modal");
  const modalBtn = document.querySelector("#modal-btn");
  const editTodoContentBtn = document.querySelector("#submitEditTodo")
  const closeBtn = document.querySelector(".close");

  // Events
  modalBtn.addEventListener("click", openModal);
  closeBtn.addEventListener("click", closeModal);
  editTodoContentBtn.addEventListener("click", editTodo)
  window.addEventListener("click", outsideClick);

  // Open
  function openModal() {
    modal.style.display = "block";
  }

  // Close
  function closeModal() {
    modal.style.display = "none";
  }

  // Close If Outside Click
  function outsideClick(e) {
    if (e.target == modal) {
      modal.style.display = "none";
    }
  }

  //Edit the content of the textarea
  function editTodo(e) {
    editTodo(id)
  }
  }
};

單擊submitEditTodo按鈕時，應觸發以下編輯功能： 

//Edit todo by id
const editTodo = function(id) {
  const editTodoContent = document.querySelector('#editTodo')
  const todoIndex = todos.findIndex(function(todo) {
    return todo.id === id;
  });

  if (todoIndex > -1) {
    editTodoContent.value = todos.text
    saveTodos(todos)
    renderTodos(todos, filters);
  }
};

saveTodos和renderTodos與其他用於創建，渲染和刪除的功能一起正常運行。

這是HTML代碼： 

<!-- Edit modal -->
  <div id="my-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Edit Todo</h2>
      </div>
      <div class="modal-body">
        <textarea name="" class="editTextArea" id="editTodo"  rows="10"></textarea>
        <button class="button" id="submitEditTodo">Edit Todo</button>
      </div>
      <div class="modal-footer">
        <!-- <h3>Modal Footer</h3> -->
      </div>
    </div>
   <!-- End modal -->

這是模式的CSS： 

/*
Edit todo modal start
*/

:root {
  --modal-duration: 1s;
  --modal-color: #BB8AB8;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  margin: 10% auto;
  width: 35%;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
  animation-name: modalopen;
  animation-duration: var(--modal-duration);
}

.editTextArea{
  width:100%
}

.modal-header h2,
.modal-footer h3 {
  margin: 0;
}

.modal-header {
  background: var(--modal-color);
  padding: 15px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-body {
  padding: 10px 20px;
  background: #fff;
}

.modal-footer {
  background: var(--modal-color);
  padding: 10px;
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.close {
  color: #ccc;
  float: right;
  font-size: 30px;
  color: #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@keyframes modalopen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
Edit todo modal end
*/

謝謝

1 個解決方案

解決方案1
 1 已采納  2019-03-04 13:22:27

以下是一些可能需要調整以實現所需功能的指針。

  1. 當前，每次單擊待辦事項的編輯按鈕時，都將新的偵聽器添加到模式中。 這可能應該只設置一次。 或者，應該在模式關閉時刪除偵聽器。

  2. 您的函數editModal實際上並未打開模態。 它的作用是在＃modal-btn按鈕上添加一個偵聽器，該監聽器將在下次單擊該按鈕時打開模式。

  3. 您正在為外部div和“編輯”按鈕設置ID，但是ID並不基於與您要創建的todo元素相關的任何內容。 因此，所有這些元素實際上都具有相同的id。 id（標識符的縮寫）通常是唯一的。 對於多個元素的分組，您應該改為使用class屬性。

  4. 您的函數“ editTodo”會自行調用。 無限遞歸。 當心重用函數名稱。

話雖如此，以下代碼是根據您提供的摘錄執行我認為想要執行的操作的粗略方法： 

 // Open const openModal = function() { document.querySelector("#my-modal").style.display = "block"; } // Close const closeModal = function() { document.querySelector("#my-modal").style.display = "none"; } function initModal() { const modal = document.querySelector("#my-modal"); const closeBtn = document.querySelector(".close"); // Events closeBtn.addEventListener("click", closeModal); window.addEventListener("click", outsideClick); // Close If Outside Click function outsideClick(e) { if (e.target == modal) { modal.style.display = "none"; } } } const filters = []; // dummy variable // Generate the DOM structure for a todo var todos = [] function generateTodoDOM(todo) { todos.push(todo); const todoEl = document.createElement("div"); const checkbox = document.createElement("input"); const label = document.createElement("label"); checkbox.appendChild(label); todoEl.setAttribute("id", "my-todos-" + todo.id); const textEl = document.createElement("p"); const editButton = document.createElement("button"); editButton.setAttribute("id", "modal-btn-" + todo.id); const removeButton = document.createElement("button"); const createDate = document.createElement("p"); createDate.textContent = 'Created: ' + new Date(); createDate.style.color = "#956E93"; // Setup the todo text textEl.textContent = todo.text; todoEl.appendChild(textEl); // Setup the remove button removeButton.textContent = "x"; todoEl.appendChild(removeButton); removeButton.addEventListener("click", function() { removeTodo(todo.id); saveTodos(todos); renderTodos(todos, filters); }); // TODO: Setup the edit note button editButton.textContent = "Edit Todo"; todoEl.appendChild(editButton); editButton.addEventListener("click", function() { //Launch the modal editModal(todo.id); openModal(); }); // Setup todo checkbox checkbox.setAttribute("type", "checkbox"); checkbox.checked = todo.completed; todoEl.appendChild(checkbox); checkbox.addEventListener("change", function() { toggleTodo(todo.id); saveTodos(todos); renderTodos(todos, filters); }); todoEl.appendChild(createDate); return todoEl; }; var editFn //Edit modal todo by id const editModal = function(id) { const todoIndex = todos.findIndex(function(todo) { return todo.id === id; }); if (todoIndex > -1) { const modal = document.querySelector("#my-modal"); const editElm = document.querySelector("#editTodo"); const editTodoContentBtn = document.querySelector("#submitEditTodo") editElm.value = todos[todoIndex].text; // Events editTodoContentBtn.removeEventListener("click", editFn) //Edit the content of the textarea editFn = function(e) { editTodo(id) closeModal() } editTodoContentBtn.addEventListener("click", editFn) } }; //Edit todo by id const editTodo = function(id) { const editTodoContent = document.querySelector('#editTodo') const todoIndex = todos.findIndex(function(todo) { return todo.id === id; }); if (todoIndex > -1) { todos[todoIndex].text = editTodoContent.value; saveTodos(todos) renderTodos(todos, filters); } }; const saveTodos = function(todos) { // dummy method, we're keeping it in memory for this example } const renderTodos = function(todosToRender) { todos = []; // clear current in-memory array var todoList = document.getElementById("todo-container"); while (todoList.firstChild) { todoList.removeChild(todoList.firstChild); } for(var i = 0; i < todosToRender.length; i++) { todoList.appendChild(generateTodoDOM(todosToRender[i])); } }; initModal(); const container = document.getElementById("todo-container"); var generatedTodos = []; for(var i = 0; i < 10; i++) { var todo = { text: "Todo " + (i+1), id: "todo-" + i, completed: false}; generatedTodos.push(todo); } renderTodos(generatedTodos); 
 /* Edit todo modal start */ :root { --modal-duration: 1s; --modal-color: #BB8AB8; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); } .modal-content { margin: 10% auto; width: 35%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); animation-name: modalopen; animation-duration: var(--modal-duration); } .editTextArea{ width:100% } .modal-header h2, .modal-footer h3 { margin: 0; } .modal-header { background: var(--modal-color); padding: 15px; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; } .modal-body { padding: 10px 20px; background: #fff; } .modal-footer { background: var(--modal-color); padding: 10px; color: #fff; text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .close { color: #ccc; float: right; font-size: 30px; color: #fff; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } @keyframes modalopen { from { opacity: 0; } to { opacity: 1; } } /* Edit todo modal end */ 
 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div id="todo-container"> </div> <!-- Edit modal --> <div id="my-modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <span class="close">&times;</span> <h2>Edit Todo</h2> </div> <div class="modal-body"> <textarea name="" class="editTextArea" id="editTodo" rows="10"></textarea> <button class="button" id="submitEditTodo">Edit Todo</button> </div> <div class="modal-footer"> <!-- <h3>Modal Footer</h3> --> </div> </div> </div> <!-- End modal --> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 javascript 編輯列表項元素 VueJs：如何編輯數組項 如何使用 Javascript 將復選框項推送到數組中 如何使用JavaScript刪除數組中的項目？ 如何使用javascript檢測數組項的語言？ 如何在SharePoint中使用javascript在Edit Control Block（ECB）中編輯項目名稱 使用Javascript編輯對象項 如何使用正則表達式使用JavaScript替換數組中的每個項目 如何使用JavaScript在條件下從數組中刪除項目 如何使用 JavaScript 從 firestore 中刪除數組項？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM