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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

PHP jQuery Ratyで評価機能の表示

n_k23
n_k23

総合スコア21

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

246閲覧

投稿2022/01/20 05:39

編集2022/01/20 21:41

前提・実現したいこと

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

jinba

2022/01/20 06:36

①DB ⇒ $result へデータを挿入する際のソースを提示ください ②foreachする前にvar_dumpした結果を提示ください <?php var_dump($result ); foreach ($result as $review): ?>
n_k23

2022/01/20 06:52

jinba様 了解しました。 追記していきます。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。