如何解决如何让我的 X 按钮删除数组内的特定对象?
我第一次在这里发帖,我对网络开发和编程非常陌生。
我目前正在尝试使用 X 按钮来删除数组中的特定对象。 它是这样的——用户可以做 3 个黄色的笔记——用户可以将值存储为一个对象,函数 displayTasks() 刷新 displayTasks() 内的笔记——当用户按下 X 时,它会触发 onclick( ) 需要删除这个特定对象,但它总是删除数组中的最后一个音符和对象 如何让它选择 div 内的确切对象? 我希望我清楚这一点! 提前谢谢!
class Task{
constructor(mytask,mydate,mytime){
this.task=mytask;
this.date=mydate;
this.time=mytime;
}
}
const myTask = document.getElementById("task")
const date = document.getElementById("date")
const time = document.getElementById("time")
const save = document.getElementById("save")
const reset = document.getElementById("reset")
const paragraph = document.getElementById("mypara")
const taskRow = document.getElementById("taskRow")
const tasks = []
function addTask() {
// 1. add new note to tasks array
// 2. call displayNotes()
if (tasks.length > 2) {
return alert("Too Many Notes please Complete One");
}
tasks.push(new Task(myTask.value,date.value,time.value));
resetTask();
displayTasks();
}
function resetTask() {
myTask.value = '';
date.value = '';
time.value = '';
}
function deleteTask(index) {
tasks.splice(index,1);
displayTasks();
}
function displayTasks() {
// 1. delete all inner html in tasks row
// 2. for each element in tasks array: add a task html to the tasks row
taskRow.innerHTML = "";
for (task in tasks) {
console.log(tasks)
let taskDiv = document.createElement("div");
taskDiv.setAttribute("class","col-sm task");
let description = document.createElement("p");
description.setAttribute("class","description");
description.innerHTML = `${tasks[task].task}<br>`
let finishDate = document.createElement("div");
finishDate.setAttribute("class","date");
finishDate.innerHTML = `${tasks[task].date}`;
let escape = document.createElement("p");
escape.setAttribute("class","escape glyphicon glyphicon-remove");
escape.innerHTML = `X`;
escape.onclick = function callback() {
deleteTask(task);
console.log(task);
// escape.onclick = function() {
// deleteTask(task);
// }
}
taskDiv.appendChild(escape)
taskDiv.appendChild(description);
taskDiv.appendChild(finishDate);
taskRow.appendChild(taskDiv);
}
}
body {
background-image: url("/jpglibrary/tile.gif");
position: absolute;
left: 450px;
}
.notes{
position: absolute;
}
/* .task_input{
overflow-y: auto;
} */
.notesInput{
position: relative;
padding: 10px;
margin: 10px;
background-image: url("jpglibrary/formbg.jpg");
}
.savebutton{
position: absolute;
left: 500px;
bottom: 30px;
}
.resetbutton{
position: absolute;
left: 500px;
bottom: 0px;
}
h1{
font-family: 'cuteFont';
text-align: center;
margin-top: 30px;
font-size: 8ch;
}
.innertext{
height: 188px;
width: 170px;
position: absolute;
top: 408px;
}
.date{
position: absolute;
padding: 4px;
bottom: 7px;
height: 28px;
width: 100px;
font-size: 13px;
}
.task{
background-image: url("/jpglibrary/notebg.png");
background-repeat: no-repeat;
height: 240px;
width: 100px;
padding: 0px;
animation: fadeIn ease 2s;
}
.description{
position:absolute;
top: 40px;
padding: 3px;
width: 175px;
height: 170px ;
overflow-y: auto;
}
.escape{
padding-left: 160px;
padding-top: 20px;
}
@font-face{
font-family: cuteFont;
src: url("fonts/CuteNotes.ttf");
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body id="main_body">
<div class='container'>
<h1>My Task Board</h1>
<!-- <div class="notes">
<img src="jpglibrary/formbg.jpg" class="mx-auto d-block">
<img src="jpglibrary/formbg.jpg" class="mx-auto d-block">
<img src="jpglibrary/formbg.jpg" class="mx-auto d-block">
</div> -->
<div class=notesInput>
<input type="text" placeholder="My task" id="task" class="task_input">
<br>
<div>
<label>Finish Date <br>
<input type="date" id="date">
</label>
</div>
<div>
<label>Finish Time<br>
<input type="time" id="time">
</div></label>
<div class="savebutton">
<input type="button" value="Save" onclick=addTask() id="save">
</div>
<div class="resetbutton">
<input type="button" onclick="resetTask()" value="Reset" id="reset">
</div>
</div>
<div id="tasksContainer" class="container">
<div id="taskRow" class="row">
</div>
</div>
</div>
</body>
<script src="Task.js"></script>
<script src="script.js"></script>
</html>
解决方法
您只需要获取点击任务的索引并将该索引提供给 deleteTask()。
escape.addEventListener('click',function callback(e) {
var child = e.target.parentElement;
var container = child.parentElement;
var index = Array.prototype.slice.call(container.children).indexOf(child)
deleteTask(index);
});
工作示例:
class Task{
constructor(mytask,mydate,mytime){
this.task=mytask;
this.date=mydate;
this.time=mytime;
}
}
const myTask = document.getElementById("task")
const date = document.getElementById("date")
const time = document.getElementById("time")
const taskRow = document.getElementById("taskRow")
const tasks = []
function addTask() {
if (tasks.length > 2) {
return alert("Too Many Notes please Complete One");
}
tasks.push(new Task(myTask.value,date.value,time.value));
resetTask();
displayTasks();
}
function resetTask() {
myTask.value = "";
date.value = "";
time.value = "";
}
function deleteTask(index) {
tasks.splice(index,1);
displayTasks();
}
function displayTasks() {
taskRow.innerHTML = '';
for (task in tasks) {
let taskDiv = document.createElement("div");
taskDiv.setAttribute("class","col-sm task");
let description = document.createElement("p");
description.setAttribute("class","description");
description.innerText = `${tasks[task].task}`;
let finishDate = document.createElement("div");
finishDate.setAttribute("class","date");
finishDate.innerText = `${tasks[task].date}`;
let escape = document.createElement("p");
escape.setAttribute("class","escape glyphicon glyphicon-remove");
escape.innerText = 'X';
escape.addEventListener('click',function callback(e) {
var child = e.target.parentElement;
var container = child.parentElement;
var index = Array.prototype.slice.call(container.children).indexOf(child)
deleteTask(index);
});
taskDiv.appendChild(escape)
taskDiv.appendChild(description);
taskDiv.appendChild(finishDate);
taskRow.appendChild(taskDiv);
}
}
.container {
width: 250px;
text-align: center;
}
.inputs,#taskRow {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.task {
border: 1px solid black;
text-align: left;
}
.escape {
cursor: pointer;
text-align: right;
margin: 0;
}
<div class='container'>
<h1>My Task Board</h1>
<div class=notesInput>
<div class="inputs">
<label for="task">Task</label>
<input type="text" placeholder="My task" id="task" class="task_input">
</div>
<div class="inputs">
<label for="date">Finish Date</label>
<input type="date" id="date">
</div>
<div class="inputs">
<label for="date">Finish Time</label>
<input type="time" id="time">
</div>
<div class="inputs">
<input type="button" onclick="resetTask()" value="Reset" id="reset">
<input type="button" value="Save" onclick=addTask() id="save">
</div>
</div>
<div id="tasksContainer" class="container">
<div id="taskRow" class="row"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。