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

Question

我正在做待办事项 webapplication.Suppose 当用户双击他的任务时，它应该被标记为已完成并且应该保存到数据库中

尝试过但没有成功，并且没有保存在数据库中

<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>

当用户双击他的任务时，它应该带有下划线以表示已完成并且它也应该保存到数据库中

Answer 1

你可以试试这个：

https://codepen.io/Khadembd/pen/xxKPoBV

$(document).ready(function(){
  $(".done").click(function(){
    var value = $(this).next("span").html();
    savetodolist(value);
  })
  
})

function savetodolist(val){
  $.ajax({
    type:"POST",
    url:"todolistsave.php",
    data:{item:val},
    success:function(data){
      console.log(data);
    }
  })
}

body{
  font-family:arial;
}

.todolist, .todolist li{
  list-style-type:none;
}

.todolist{
  padding-left:0;
}

.todolist li{
  position:relative;
  margin-bottom:15px;
  padding-left:30px;
  line-height: 24px;
  position:relative;
}

.todolist li [type=checkbox]{
  position:absolute;
  top:0;
  left:0;
  width:20px;
  height:20px;
  opacity:0;
  z-index:200;
  cursor:pointer;
}

.todolist li span:before{
  position:absolute;
  content:"";
  width:20px;
  height:20px;
  border:1px solid rgb(24, 78, 163);
  border-radius:50%;
  top:0;
  left:0;
  transition:all 0.5s ease;
}

.todolist li span:after{
  position:absolute;
  content:"";
  width:5px;
  height:10px;
  border-right:1px solid rgb(255, 255, 255);
  border-bottom:1px solid rgb(255, 255, 255);
  top:4px;
  left:7px;
  transform:rotate(45deg);
  opacity:0;
  visibility:hidden;
  transition:all 0.5s ease;
}

.todolist li [type=checkbox]:checked + span{
  text-decoration:line-through;
}

.todolist li [type=checkbox]:checked + span:before{
  background-color:rgb(24, 78, 163);
}
.todolist li [type=checkbox]:checked + span:after{
  opacity:1;
  visibility:visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="todolist">
  <li>
    <input class="done" type="checkbox"> 
    <span>Buy Oranges</span>
  </li>
  <li>
    <input class="done" type="checkbox"> 
    <span>Attend Skype Meeting</span>
  </li>
  <li>
    <input class="done" type="checkbox">
    <span>Meetup with Sabriya</span>
  </li>
  <li>
    <input class="done" type="checkbox"> 
    <span>Deliver gift to Dad</span>
  </li>
</ul>

Answer 2

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

显示用户的列表任务
捕捉事件用户点击进入任务
将 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>

你的JS代码：

<script type="text/javascript">
        $(document).ready(function() {

            $('.click_to_task').click(function () {
                let task_id = $(this).attr('data-task-id')
            })

        })
    </script>

现在：你有 task_id。你会把这个推送到服务器并更新这个任务状态使用 ajax

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

好的。现在在服务器上你只需将 tast 的状态更新为 Done :D

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

How to underline task when click on it and it should be saved to database

javascript

jquery

laravel-5.7