Question

我遇到了切换逻辑被破坏的问题。简单的待办事项列表，点击后您应该切换 isCompleted 。它适用于第一个项目，但似乎 isDone 的值是随机的。而且，如果我刷新，改变的状态不会停留。但是当我从更新中调用返回的对象时，控制台.log正确地更改了字段。

＆＃13;

function updateTodo(task) {
  //const updateUrl = "/api/todos/" + task.data("id");
  const isDone = !(task.data("completed"));
  const updateData = {
    isCompleted: isDone
  };
  //$.ajax({
      //method: "PUT",
      //url: updateUrl,
      //data: updateData
    //})
  task.toggleClass("done");
  task.data("completed", isDone);
  console.log("task.data completed:" + task.data("completed"));
}

// change status on todo
$("#todo-list").on("click", "li", function() {
  updateTodo($(this));
});

＆＃13;

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header {
  margin-bottom: 20px;
  width: 50%;
  text-align: center;
}

header h1 {
  font-size: 3em;
  color: purple;
  font-weight: 500;
  margin-bottom: 0px;
}

header h1 span {
  font-weight: 800;
}

header h2 {
  font-size: 1.2em;
  font-weight: 400;
  color: purple;
}

section {
  width: 50%;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

.wrap {
  display: inline-block;
  /*  centering  */
  position: absolute;
  left: 50%;
  margin-right: 50%;
  transform: translate(-50%, -50%);
}

input {
  /*  cleaning up  */
  outline: none;
  border: none;
  padding: 20px;
  font-size: 24px;
  /*  customize  */
  background: transparent;
  border-bottom: 1px solid #fff;
  color: purple;
  z-index: 20;
}

.bg {
  /*   position */
  position: absolute;
  top: 0%;
  height: 100%;
  width: 0;
  /*   customize */
  background: #fff;
  transition: width 0.6s cubic-bezier(0.52, -0.43, 0.47, 1.29);
  z-index: -2;
}

input:focus+.bg {
  background: #fff;
  width: 100%;
}

input::-webkit-input-placeholder {
  color: #fff;
  transition: color .3s ease;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}


/* List */

#todo-list {
  width: 50%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#todo-list li {
  height: 60px;
  line-height: 60px;
  font-size: 1.5em;
  background-color: white;
  margin-bottom: 4px;
  box-shadow: 1px 1px 1px silver;
  color: purple;
}

#todo-list li.done {
  background-color: #efefef;
  text-decoration: line-through;
  box-shadow: none;
  border: 1px solid lightgray;
}


/* Delete buton */

#todo-list li span.delete {
  display: inline-block;
  background-color: crimson;
  color: white;
  text-align: center;
  height: 60px;
  width: 0px;
  left: -60px;
  margin-right: 20px;
  transition: 0.2s ease-in;
  opacity: 0;
}

#todo-list li:hover span.delete {
  width: 60px;
  opacity: 1;
}

＆＃13;

<!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>Todo API</title>
  <link href="app.css" rel="stylesheet" type="text/css">
  <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

<body>
  <header>
    <h1>todo<span>list</span></h1>
    <h2>simple todo-list built with node</h2>
  </header>
  <section>
    <div class="wrap">
      <input type="text" id="todo-input" placeholder="What should you do ?">
      <div class="bg"></div>
      </div>
  </section>
  <ul id="todo-list">
    <li class="task"><span class="delete">X</span>Debug code</li>
    <li class="task"><span class="delete">X</span>Try this one</li>
  </ul>
</body>

</html>

＆＃13;

监听器：

$("#todo-list").on("click", "li", function () {
    updateTodo($(this));
});

AJAX请求和切换：

function updateTodo(task) {
    const updateUrl = "/api/todos/" + task.data("id");
    const isDone = !(task.data("completed"));
    const updateData = {isCompleted: isDone};
    $.ajax({
        method: "PUT",
        url: updateUrl,
        data: updateData
    })
        .then(function (todo) {
            console.log(todo);
            task.toggleClass("done");
            task.data("completed", isDone);
            console.log("task Data completed:" + task.data("completed"));
        })
        .catch(function (err) {
            console.log(err);
        });
}

更新路线：

exports.updateTodo = function (req, res) {
    db.Todo.findByIdAndUpdate(req.params.todoId, req.body, {new: true})
        .then(function (todo) {
            res.json(todo);
        })
        .catch(function (err) {
            res.send(err);
        });
}

我试图解决这个问题已经很久了。我一步一步地重写代码，但我不知道什么是错的。

有人可以给我一个提示吗？

非常感谢你的时间！干杯

Answer 1

好吧，我的坏。我真的需要离开一点。

事实是，我在检查布尔值时犯了一个错误。在 updateTodo函数中，我检查了对象的字段，而不是分配的数据到li任务：

if (task.isCompleted) {
    task.addClass("done");
}

应该是什么：

if (task.data("completed") {
    task.addClass("done");
}

Mongodb＆amp; amp;布尔切换Node.js的

监听器：

AJAX请求和切换：

更新路线：

1 个答案: