前提・実現したいこと
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
初めての質問ですので要領を得ていないかもしれませんが、よろしくお願いいたします。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。