Ajax処理でクリックイベント時にクラス付け外しを行いたい

前提・実現したいこと

PHP,MySQL,jQueryを用いてTodo管理アプリを作っています。

クリックイベントで終了したタスクにはline-throughを適用し、再度クリックすると適用されないようにするという機能を作っている段階です。
ajaxを用いて画面の遷移なく、クリックに応じて変化してくれるはずです。

dotinstallの「PHPでTodo管理アプリをつくろう」（https://dotinstall.com/lessons/todo_app_php_v3）に沿って学習しています。

発生している問題

removeClassを用いて既にliにline-throughが適用されている場合は適用を外すことができるが、addClassを用いてline-throughを適用することはできないという問題が発生しています。何度クリックしても一度適用が外れるとline-throughが適用されないままです。
しかし、クリック後に再読み込みするとクリックした回数に応じてクラスが追加されたり外れたりしています。

ターミナルや、JavaScriptコンソールにもエラーメッセージ等が出ていません。

該当のソースコード

index.php
<?php

require_once(__DIR__.'/config.php');
require_once(__DIR__.'/functions.php');
require_once(__DIR__.'/Todo.php');

// get Todos
$todoApp = new \MyApp\Todo();
$todos = $todoApp->getAll();

// var_dump($todos);
// exit;

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Todos</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <h1>Todos</h1>
    <form action="">
      <input type="text" id="new_todo" placeholder="What needs to be done?">
    </form>
    <ul id="todos">
    <?php foreach($todos as $todo) : ?>
      <li id="todo_<?= h($todo->id); ?>" data-id="<?= h($todo->id); ?>">
        <input type="checkbox" class="update_todo" <?php if ($todo->state ==='1') {echo 'checked' ; } ?>>
        <span class="todo_title <?php if ($todo->state ==='1') {echo 'done' ; } ?>"><?= h($todo->title); ?></span>
        <div class="delete_todo">x</div>
      </li>
    <?php endforeach; ?>
    </ul>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="todo.js"></script>
</body>
</html>

PHP
1_ajax.php
2<?php
3
4require_once(__DIR__.'/config.php');
5require_once(__DIR__.'/functions.php');
6require_once(__DIR__.'/Todo.php');
7
8$todoApp = new \MyApp\Todo();
9
10if ($_SERVER['REQUEST_METHOD'] === 'POST') {
11  try {
12    $res = $todoApp->post();
13    header('Cotent-Type: application/json');
14    echo json_encode($res);
15    exit;
16  } catch (Exception $e) {
17    header($_SERVER['SERVER_PROTOCOL'].'500 Internal Server Error', true, 500);
18    echo $e->getMessage();
19    exit;
20  }
21}

PHP
1Todo.php
2<?php
3
4namespace MyApp;
5
6class Todo {
7  private $_db;
8
9  public function __construct() {
10    try {
11      $this->_db = new \PDO(DSN, DB_USERNAME, DB_PASSWORD);
12      $this->_db->setAttribute(\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);
13    } catch (\PDOException $e) {
14      echo $e->getMessage();
15      exit;
16    }
17  }
18
19  public function getAll() {
20    $stmt = $this->_db->query("select * from todos order by id desc");
21    return $stmt->fetchAll(\PDO::FETCH_OBJ);
22  }
23
24  public function post() {
25    if (!isset($_POST['mode'])) {
26      throw new \Exception('mode not set!');
27    }
28
29    switch ($_POST['mode']) {
30      case 'update':
31        return $this->_update();
32      case 'create':
33        return $this->_create();
34      case 'delete':
35        return $this->_delete();
36    }
37  }
38
39  private function _update() {
40    if (!isset($_POST['id'])) {
41      throw new \Exception('[update] id not set!');
42    }
43
44    $this->_db->beginTransaction();
45
46    $sql = sprintf("update todos set state = (state + 1) %% 2 where id = %d", $_POST['id']);
47    $stmt = $this->_db->prepare($sql);
48    $stmt->execute();
49
50    $sql = sprintf("select state from todos where id = %d", $_POST['id']);
51    $stmt = $this ->_db->query($sql);
52    $state = $stmt->fetchColumn();
53
54    $this->_db->commit();
55
56    return [
57      'state' => $state
58    ];
59
60
61  }
62
63
64  private function _create(){
65
66  }
67
68  private function _delete(){
69
70  }
71
72}
73

CSS
1styles.css
2body {
3  font-family: Arial, sans-serif;
4}
5
6#container {
7  width: 500px;
8  margin: 15px auto;
9}
10
11h1 {
12  font-size: 18px;
13  text-align: center;
14  margin-bottom: 10px;
15}
16
17ul {
18  list-style: none;
19  padding: 0;
20  margin: 0;
21}
22
23ul >li {
24  padding-bottom: 6px;
25}
26
27#new_todo {
28  padding: 8px;
29  border-radius: 3px;
30  width: 490px;
31  margin: 0 auto;
32  font-size: 16px;
33}
34
35.delete_todo {
36  float: right;
37  display: inline-block;
38  color: #ccc;
39  cursor: pointer;
40}
41
42.done {
43  text-decoration: line-through;
44}
45

jQuery
1$(function () {
2  'use strict';
3
4  // update
5  $('#todos').on('click', '.update_todo', function () {
6    // id
7    var id = $(this).parents('li').data('id');
8    // ajax
9    $.post('_ajax.php', {
10      id: id,
11      mode: 'update'
12    }, function(res) {
13      if (res.state === '1') {
14        $('#todo_' + id).find('.todo_title').addClass('done');
15      } else {
16        $('#todo_' + id).find('.todo_title').removeClass('done');
17      }
18    })
19  });
20
21});
22

試したこと

ajax処理の間違いだと思い、removeClassあたりと比較してみたのですが、間違いに気づけませんでした。
その後、コードを一度ゼロから書き直してみたものの変わりません。

補足情報

PHP 5.6.40

初めての質問ですので要領を得ていないかもしれませんが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

解決しました。しょうもないのですが、_ajax.phpにおいて

PHP
1header('Content-Type: application/json');

上記のように書かなければならないのに、【Cotent-Type】となっておりました。
冷静になって見返します…。

投稿2020/02/05 14:42

dongtatsu

総合スコア8

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！