如何为对象外的按钮使用相同的参数？

时间：2018-08-21 23:17:07

标签： javascript html

我用document.createElement（'button'）;创建了一个按钮。在DATE_FORMAT(FROM_UNIXTIME(FullDate), '%Y') 内；并作为document.createElement（'li'）传递。每当我向DOM添加新的<ul>时，该按钮将显示在添加<li>的前面。该按钮将以其<li>作为参数，以在对象中访问它并调用函数。

但是，我还在HTML文件中创建了一个按钮，该按钮位于parentNode.Id之外，并且未显示在<ul>元素中。这是一个独立的按钮。如何使该按钮的行为与在<li>元素中创建的按钮的行为相同？有什么办法可以在该对象外部的按钮中使用相同的属性？

我想要一个按钮来保存我所做的任何更改。不是，每个<li>元素只有一个按钮。

我曾尝试给他们相同的<li>，但这是行不通的。因为在Javascript文件中创建的按钮将显示在我的应用程序中添加的每个className中。 <li>前面显示的按钮正在获取特定的'<li> <li>作为参数。如果您看一下我在这里输入的那段代码，您将看到Javascript代码的最后一行，即参数。

parentNode.Id

2 个答案:

答案 0 :(得分：2)

要使您的想法可行，您将必须在每个input中包含一个li元素。它应该是隐藏的，直到按下edit按钮。我将向edit添加一个li类，并使用CSS揭示input元素。一个cancel按钮将从edit中删除li类。

因此，如果呈现的视图如下：

<ul class="todos">
  <li>
   <span class="todo-text">Old todo</span>
   <input type="text" value="Old todo" />
  </li>
  <li class="edit">
   <span class="todo-text">Old todo #2</span>
   <input type="text" value="Old todo #2" />
  </li>
</ul>

CSS的样式

li input,
li.edit .todo-text {
  display: none;
}

li.edit input {
 display: inline;
}

在当前li和更改input之间切换。

如果要在单击单个保存按钮时保存所有编辑<li>的状态，则首先必须将事件侦听器绑定到<button>：

const saveButton = document.createElement('button');
const body = document.getElementByTag('body'); 
// I chose body to append the button to, but you can append it to your main container

body.appendChild(saveButton);
saveButton.addEventListener('click', saveState);

现在，saveState将定义为：

function saveState(e) {
  let data = [];
  const todos = document.querySelector('ul.todos li.edit');

  // On save check all "changing" <li>
  Array.from(todos).forEach((li, i) => { 
    const editInput = li.querySelector("input"); // Get input inside <li>

    if (editInput != null) {
      const span = li.querySelector("todo-text");
      span.textContent = editInput.value; // add the edit text to the span
    }

    li.classList.remove("edit") // Remove the edit class
  });
}

答案 1 :(得分：0)

根据我的理解，您想更新特定的待办事项。为此，您可以使用以下代码。

// id of the clicked todo
var todoID = -1;
// Your Todo array
var todos = [
    {
        id:1,
        description: "Exercise",
        isCompleted:false
    },
    {
        id:2,
        description: "Shopping",
        isCompleted:false
    },

];


// update specific todo item in the todo array according to the id
function updateToDos(id ,newDesc){
    
    for (todo in todos){
        if(todos[todo].id == id){
            todos[todo].description = newDesc;
        }
    }
}


var ul = document.getElementById('todos');

// set event listener at in UL to get info about clicked li
ul.onclick = function(e) {

    // get clicked li element, Note: e.srcElement for IE support
    var target = e.target || e.srcElement;
    // get id of the li element
    todoID = target.id;
    // get todo editing input field
    var modifiedToDoDesc = document.getElementById("edit-todo-input");
    // set the value of the input field = innerHTML of clicked li  
    modifiedToDoDesc.value = target.innerHTML;
    
};

var btnSave = document.getElementById('btnSave');

btnSave.onclick = function(){

    var modifiedToDoDesc = document.getElementById("edit-todo-input").value;

    updateToDos(todoID, modifiedToDoDesc);
    // Update the todos in the UI here
   
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <ul id="todos" onClick="hello">
        <li id="1">One</li>
        <li id="2">Two</li>

    </ul>
        <input type="text" id="edit-todo-input">
        <button id="btnSave">Save</button>
    <script src="main.js"></script>
</body>
</html>

相关问题
最新问题