Question

我做了一个待办事项列表，但我对此很陌生，但是在添加多个任务之后，它添加了不完整的任务，并且在尝试编辑任何要转换为type = text的列表时具有一个编辑和删除按钮，但是在此编辑任务之外输入时，它仍然可以进行编辑，这应该不会发生 这是Java脚本代码

var taskInput=document.getElementById("new-task");
var addButton=document.getElementsByTagName("button")[0];
var incompleteTaskHolder=document.getElementById("incomplete-tasks");
var completedTasksHolder=document.getElementById("completed-tasks");

var createNewTaskElement=function(taskString){

    var listItem=document.createElement("li");

    var checkBox=document.createElement("input");

    var label=document.createElement("label");

    var editInput=document.createElement("input");

    var editButton=document.createElement("button");

    var deleteButton=document.createElement("button");

    label.innerText=taskString;

    checkBox.type="checkbox";
    editInput.type="text";

    editButton.innerText="Edit";
    editButton.className="edit";
    deleteButton.innerText="Delete";
    deleteButton.className="delete";

    listItem.appendChild(checkBox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
    return listItem;

}



var addTask=function(){
    console.log("Add Task...");
    if(taskInput.value==='')
        {
         alert('Required');   
        }
    else
        {
            var listItem=createNewTaskElement(taskInput.value);
            incompleteTaskHolder.appendChild(listItem);
            bindTaskEvents(listItem, taskCompleted);
            taskInput.value="";
        }
}


var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");

        if(containsClass){
            if(listItem.value=='')
                {
                     alert('empty edit');
                }
            else
                {
                   label.innerText=editInput.value;   
                }
        }else{
            editInput.value=label.innerText;
        }
        listItem.classList.toggle("editMode");
}
var deleteTask=function(){
        console.log("Delete Task...");
        var listItem=this.parentNode;
        var ul=listItem.parentNode;
        ul.removeChild(listItem);

}

var taskCompleted=function(){
        console.log("Complete Task...");
        var listItem=this.parentNode;
         completedTasksHolder.appendChild(listItem);
        bindTaskEvents(listItem, taskIncomplete);
}
var taskIncomplete=function(){
        console.log("Incomplete Task...");
        var listItem=this.parentNode;
        incompleteTaskHolder.appendChild(listItem);
            bindTaskEvents(listItem,taskCompleted);
}

var ajaxRequest=function(){
    console.log("AJAX Request");
}

//addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);
$addNewTask.addEventListener("keypress",addTask);


var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
    console.log("bind list item events");

    var checkBox=taskListItem.querySelector("input[type=checkbox]");
    var editButton=taskListItem.querySelector("button.edit");
    var deleteButton=taskListItem.querySelector("button.delete");

            editButton.onclick=editTask;

            deleteButton.onclick=deleteTask;

            checkBox.onchange=checkBoxEventHandler;
}

    for (var i=0; i<incompleteTaskHolder.children.length;i++){
        bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
    }

    for (var i=0; i<completedTasksHolder.children.length;i++){
        bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
    }

这是我在其中添加javascript的html代码

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
   <title>Todo App</title>
   <link rel="stylesheet" href="{{asset('css/style.css')}}">
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">    
</head>
<body>
    <div class="container">
      <p>
        <label for="new-task">Add List</label><input id="new-task" type="text" placeholder="Enter to do list"><button class="btn btn-default">Add</button>
      </p>

      <h3>To-do List</h3>
      <ul id="incomplete-tasks">
      </ul>

      <h3>Completed Task</h3>
      <ul id="completed-tasks">
      </ul>
    </div>

    <script type="text/javascript" src="app.js"></script>
    <script  src="{{asset('js/index.js')}}"></script>

  </body>
</html>

这是附加的图像，其中显示了两个编辑输入，我想在尝试单击其他任何内容时列出，然后应列出编辑，请帮助我

Answer 1

回答标题中的问题

您应该在该按钮上添加ID或唯一标识符。

     $(document).ready(()=>{

        $(document.body).click((e)=>{
            var button = $('#your_button_id')
            if(e.target.id !== 'your_button_id' && $.contains(button[0]), e.target)) 
            {
             doSomething()
            }

        })

     })

单击页面上的其他任何内容后，应列出“编辑”按钮输入

1 个答案: