前提・実現したいこと
PHPで投稿機能を実装する際に評価機能を追加で実装している。
DBに登録した投稿データをforeach文で表示する際に評価機能の
星マークを表示させたい。しかし二つ投稿があるのに対して一つしか表示しない。
foreach文ですべての投稿に評価機能を表示させたい。
発生している問題・エラーメッセージ
php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/sanitize.css"> <link rel="stylesheet" href="/css/style.css"> <title>投稿トップ</title> </head> <body> <main class="top_box"> <?php foreach ($result as $review): ?> <div class=tweetBox> <div class="tweetUser"> <p class="userName"><?php echo h($review['user_name']); ?></p> </div> <div class=tweetFlex> <div class="tweetImage"> <img src="<?php echo h($review['image']); ?>" alt="..."> </div> <div class="tweetText"> <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> <p>おすすめ度</p> <!-- <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> --> <div id= '<?php echo h($review['recommends']); ?>'class="raty<?php echo h($review['recommends']); ?>"></div> </div> </div> </div> <?php endforeach; ?> </main> <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> <script src="/js/jquery.raty.js"></script> <script src="/js/jquery.js"></script> <script type="text/javascript"> $('.raty<?php echo h($review['recommends']); ?>').raty({ readOnly: true, number: 5, score:<?php echo h($review['recommends']); ?>, }); </script> </body> </html>
試したこと
php
<body> <?php // header部分 include 'templates/header.php'; ?> <main class="top_box"> <?php foreach ($result as $review): ?> <div class=tweetBox> <div class="tweetUser"> <p class="userName"><?php echo h($review['user_name']); ?></p> </div> <div class=tweetFlex> <div class="tweetImage"> <img src="<?php echo h($review['image']); ?>" alt="..."> </div> <div class="tweetText"> <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> <p>おすすめ度</p> <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> </div> </div> </div> <?php endforeach; ?> </main> <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> <script src="/js/jquery.raty.js"></script> <script src="/js/jquery.js"></script> <script type="text/javascript"> $(function() { $('#star').raty( { readOnly: true, //閲覧者によるスコアの変更不可 score: function() { return $(this).attr('data-score'); }, path: '/img/' //サーバ上のRaty画像のパス }); }); </script> </body>
追記
php
// DBから取得 public function reviewAll($page = 0): array { $sql = 'SELECT u.name AS user_name, s.* FROM Shrines_review AS s JOIN users AS u on u.id = s.user_id ORDER BY id DESC'; $sql .= ' LIMIT 10 OFFSET '.(10 * $page); $sth = $this->dbh->prepare($sql); $sth->execute(); $result = $sth->fetchAll(PDO::FETCH_ASSOC); return $result; } // 取得結果 var_dump($result); array(2) { [0]=> array(9) { ["user_name"]=> string(27) "テスト管理ユーザー" ["id"]=> string(1) "4" ["title"]=> string(12) "テスト2" ["recommends"]=> string(1) "4" ["description"]=> string(12) "テスト2" ["image"]=> string(52) "img/20220120103123084AME0226_TP_Vのコピー.jpg" ["created_at"]=> string(19) "2022-01-20 10:31:23" ["updated_at"]=> string(19) "2022-01-20 10:31:23" ["user_id"]=> string(2) "35" } [1]=> array(9) { ["user_name"]=> string(27) "テスト管理ユーザー" ["id"]=> string(1) "3" ["title"]=> string(12) "テスト3" ["recommends"]=> string(1) "3" ["description"]=> string(12) "テスト3" ["image"]=> string(34) "img/20220119050135python_18894.png" ["created_at"]=> string(19) "2022-01-19 17:01:35" ["updated_at"]=> string(19) "2022-01-20 14:00:32" ["user_id"]=> string(2) "35" } }
あるサイトにて見つけたコードを参考にし表示させようとしたが
今度は星マークすら表示されなくなった。
画像のルートパス
リンク先
ご助力をお願いします。
補足情報(FW/ツールのバージョンなど)
MAMP
PHP 7.4.21
phpMyAdmin 5.1.0
まだ回答がついていません
会員登録して回答してみよう