Javascript 如何在单击任务时为其加下划线，并将其保存到数据库中

我正在制作todo Web应用程序。假设当用户双击他的任务时，该任务应标记为已完成，并应保存到数据库中

已尝试但不起作用，并且未保存在数据库中

<script>

    // Add a "checked" symbol when clicking on a list item
    var list = document.querySelector('ul');
    list.addEventListener('click', function(ev) {
        if (ev.target.tagName === 'li') {
            ev.target.classList.toggle('checked');
        }
    }, false);
</script>


            <div class = "card-body text-center">
                <h4 class = 'card-text'>Today</h4><hr><br>
                @foreach($task as $tasks)
                    @if($tasks->remind=='today')
                        <ul class = "list-group">
                            <form action = {{ route('task.destroy',$tasks->id) }} method="post">
                                @csrf
                                @method('DELETE')
                                <li class = "list-group-item ">{{ $tasks->task }}<span><button><i class="fa fa-close" style="font-size:12px;color:red"></i></button></span></li>
                            </form>
                        </ul>
                    @endif
                @endforeach
            </div>

//单击列表项时添加“选中”符号
var list=document.querySelector（'ul'）；
list.addEventListener（'click'，函数（ev）{
如果（ev.target.tagName=='li'）{
ev.target.classList.toggle（'checked'）；
}
}，假）；
今天


@foreach（$task作为$tasks）
@如果（$任务->提醒=='today'）

id）}}method=“post”>
@csrf
@方法（'DELETE'）
{{$tasks->task}

@恩迪夫
@endforeach

当用户双击其任务时，应加下划线以指示已完成，并应将其保存到数据库中

您可以尝试以下操作：

$（文档）.ready（函数（）{
$（“.done”）。单击（函数（）{
var value=$（this.next（“span”）.html（）；
savetodolist（值）；
})
})
函数savetodolist（val）{
$.ajax({
类型：“POST”，
url:“todolistsave.php”，
数据：{item:val}，
成功：功能（数据）{
控制台日志（数据）；
}
})
}

正文{
字体系列：arial；
}
.托多利斯特，.托多利斯特李{
列表样式类型：无；
}
托多利斯特先生{
左侧填充：0；
}
todolist li先生{
位置：相对位置；
边缘底部：15px；
左侧填充：30px；
线高：24px；
位置：相对位置；
}
.todolist li[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
宽度：20px；
高度：20px；
不透明度：0；
z指数：200；
光标：指针；
}
.托多利斯特·李斯潘：之前{
位置：绝对位置；
内容：“；
宽度：20px；
高度：20px；
边框：1px实心rgb（24,78,163）；
边界半径：50%；
排名：0；
左：0；
过渡：所有0.5s缓解；
}
.托多利斯特·李斯潘：之后{
位置：绝对位置；
内容：“；
宽度：5px；
高度：10px；
右边框：1px实心rgb（255、255、255）；
边框底部：1px实心rgb（255、255、255）；
顶部：4px；
左：7px；
变换：旋转（45度）；
不透明度：0；
可见性：隐藏；
过渡：所有0.5s缓解；
}
.todolist li[类型=复选框]：选中+span{
文字装饰：线条贯通；
}
.todolist li[类型=复选框]：选中+span:之前{
背景色：rgb（24,78,163）；
}
.todolist li[类型=复选框]：选中+span:之后{
不透明度：1；
能见度：可见；
}

买桔子


参加Skype会议


与萨布里亚会面


送礼物给爸爸

您可以尝试以下方法：

$（文档）.ready（函数（）{
$（“.done”）。单击（函数（）{
var value=$（this.next（“span”）.html（）；
savetodolist（值）；
})
})
函数savetodolist（val）{
$.ajax({
类型：“POST”，
url:“todolistsave.php”，
数据：{item:val}，
成功：功能（数据）{
控制台日志（数据）；
}
})
}

正文{
字体系列：arial；
}
.托多利斯特，.托多利斯特李{
列表样式类型：无；
}
托多利斯特先生{
左侧填充：0；
}
todolist li先生{
位置：相对位置；
边缘底部：15px；
左侧填充：30px；
线高：24px；
位置：相对位置；
}
.todolist li[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
宽度：20px；
高度：20px；
不透明度：0；
z指数：200；
光标：指针；
}
.托多利斯特·李斯潘：之前{
位置：绝对位置；
内容：“；
宽度：20px；
高度：20px；
边框：1px实心rgb（24,78,163）；
边界半径：50%；
排名：0；
左：0；
过渡：所有0.5s缓解；
}
.托多利斯特·李斯潘：之后{
位置：绝对位置；
内容：“；
宽度：5px；
高度：10px；
右边框：1px实心rgb（255、255、255）；
边框底部：1px实心rgb（255、255、255）；
顶部：4px；
左：7px；
变换：旋转（45度）；
不透明度：0；
可见性：隐藏；
过渡：所有0.5s缓解；
}
.todolist li[类型=复选框]：选中+span{
文字装饰：线条贯通；
}
.todolist li[类型=复选框]：选中+span:之前{
背景色：rgb（24,78,163）；
}
.todolist li[类型=复选框]：选中+span:之后{
不透明度：1；
能见度：可见；
}

买桔子


参加Skype会议


与萨布里亚会面


送礼物给爸爸

第一步，你需要解释你的意思

• 显示用户的列表任务
• 捕获事件用户点击进入任务
• 将id任务推送到服务器并更新此任务的状态

下一步： 您需要捕获点击事件 您可以编写HTML：

<a href="#" class="click_to_task" data-task-id="1">Task 1</a>
    <a href="#" class="click_to_task" data-task-id="2">Task 2</a>
    <a href="#" class="click_to_task" data-task-id="3">Task 3</a>
    <a href="#" class="click_to_task" data-task-id="4">Task 4</a>

嗯。现在在服务器u上，只需将tast的状态更新为“完成”

---

：D

第一步，你需要解释你的意思

• 显示用户的列表任务
• 捕获事件用户点击进入任务
• 将id任务推送到服务器并更新此任务的状态

下一步： 您需要捕获点击事件 您可以编写HTML：

<a href="#" class="click_to_task" data-task-id="1">Task 1</a>
    <a href="#" class="click_to_task" data-task-id="2">Task 2</a>
    <a href="#" class="click_to_task" data-task-id="3">Task 3</a>
    <a href="#" class="click_to_task" data-task-id="4">Task 4</a>

嗯。现在在服务器u上，只需将tast的状态更新为“完成”

---

：D

如何在不使用ajaxu的情况下在服务器上保存单击任务时，只需调用带有参数的URL即为任务id。{Task_id}=>在服务器上。将状态任务更新为“完成”。如何在不使用ajaxu的情况下在服务器上保存？单击任务时，只需调用带有参数的URL即为任务id。{Task_id}=>在服务器上。将状态任务更新为“完成”。

let url = '{{ route('update-status-task') }}'
         $.ajax({
            type:"POST",
            url:"save.php",
            data:{task_id: task_id},
            success:function(data){
              // you process
            }
          })