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

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

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

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

PHP

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

jQuery

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

Q&A

解決済

1回答

738閲覧

PHP jQuery Ratyで評価機能の表示

n_k23

総合スコア21

jQueryプラグイン

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

PHP

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

jQuery

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

0グッド

0クリップ

投稿2022/01/20 05:39

編集2022/01/20 21:41

前提・実現したいこと

PHPで投稿機能を実装する際に評価機能を追加で実装している。
DBに登録した投稿データをforeach文で表示する際に評価機能の
星マークを表示させたい。しかし二つ投稿があるのに対して一つしか表示しない。
foreach文ですべての投稿に評価機能を表示させたい。

発生している問題・エラーメッセージ

php

1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="/css/sanitize.css"> 9 <link rel="stylesheet" href="/css/style.css"> 10 <title>投稿トップ</title> 11</head> 12 13<body> 14 <main class="top_box"> 15 <?php foreach ($result as $review): ?> 16 <div class=tweetBox> 17 <div class="tweetUser"> 18 <p class="userName"><?php echo h($review['user_name']); ?></p> 19 </div> 20 <div class=tweetFlex> 21 <div class="tweetImage"> 22 <img src="<?php echo h($review['image']); ?>" alt="..."> 23 </div> 24 <div class="tweetText"> 25 <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> 26       <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> 27 <p>おすすめ度</p> 28 <!-- <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> --> 29 <div id= '<?php echo h($review['recommends']); ?>'class="raty<?php echo h($review['recommends']); ?>"></div> 30 </div> 31 </div> 32 33 </div> 34 <?php endforeach; ?> 35 </main> 36 <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> 37 <script src="/js/jquery.raty.js"></script> 38 <script src="/js/jquery.js"></script> 39 <script type="text/javascript"> 40 $('.raty<?php echo h($review['recommends']); ?>').raty({ 41 readOnly: true, 42 number: 5, 43 score:<?php echo h($review['recommends']); ?>, 44 }); 45 </script> 46</body> 47</html>

試したこと

php

1<body> 2 <?php 3 // header部分 4 include 'templates/header.php'; ?> 5 <main class="top_box"> 6 <?php foreach ($result as $review): ?> 7 <div class=tweetBox> 8 <div class="tweetUser"> 9 <p class="userName"><?php echo h($review['user_name']); ?></p> 10 </div> 11 <div class=tweetFlex> 12 <div class="tweetImage"> 13 <img src="<?php echo h($review['image']); ?>" alt="..."> 14 </div> 15 <div class="tweetText"> 16 <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> 17       <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> 18 <p>おすすめ度</p> 19 <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> 20 </div> 21 </div> 22 23 </div> 24 <?php endforeach; ?> 25 </main> 26 <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> 27 <script src="/js/jquery.raty.js"></script> 28 <script src="/js/jquery.js"></script> 29 <script type="text/javascript"> 30 $(function() { 31 $('#star').raty( { 32 readOnly: true, //閲覧者によるスコアの変更不可 33 score: function() { 34 return $(this).attr('data-score'); 35 }, 36                        path: '/img/' //サーバ上のRaty画像のパス 37}); 38 }); 39</script> 40</body>

追記

php

1// DBから取得 2public function reviewAll($page = 0): array 3 { 4 $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'; 5 $sql .= ' LIMIT 10 OFFSET '.(10 * $page); 6 $sth = $this->dbh->prepare($sql); 7 $sth->execute(); 8 $result = $sth->fetchAll(PDO::FETCH_ASSOC); 9 10 return $result; 11 } 12// 取得結果 13var_dump($result); 14array(2) { 15 [0]=> 16 array(9) { 17 ["user_name"]=> 18 string(27) "テスト管理ユーザー" 19 ["id"]=> 20 string(1) "4" 21 ["title"]=> 22 string(12) "テスト2" 23 ["recommends"]=> 24 string(1) "4" 25 ["description"]=> 26 string(12) "テスト2" 27 ["image"]=> 28 string(52) "img/20220120103123084AME0226_TP_Vのコピー.jpg" 29 ["created_at"]=> 30 string(19) "2022-01-20 10:31:23" 31 ["updated_at"]=> 32 string(19) "2022-01-20 10:31:23" 33 ["user_id"]=> 34 string(2) "35" 35 } 36 [1]=> 37 array(9) { 38 ["user_name"]=> 39 string(27) "テスト管理ユーザー" 40 ["id"]=> 41 string(1) "3" 42 ["title"]=> 43 string(12) "テスト3" 44 ["recommends"]=> 45 string(1) "3" 46 ["description"]=> 47 string(12) "テスト3" 48 ["image"]=> 49 string(34) "img/20220119050135python_18894.png" 50 ["created_at"]=> 51 string(19) "2022-01-19 17:01:35" 52 ["updated_at"]=> 53 string(19) "2022-01-20 14:00:32" 54 ["user_id"]=> 55 string(2) "35" 56 } 57}

あるサイトにて見つけたコードを参考にし表示させようとしたが
今度は星マークすら表示されなくなった。
画像のルートパス
リンク先
ご助力をお願いします。

補足情報(FW/ツールのバージョンなど)

MAMP
PHP 7.4.21
phpMyAdmin 5.1.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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様 了解しました。 追記していきます。
guest

回答1

0

ベストアンサー

とりあえず↓そのまま動かしてください、動くと思います

<?php $result[0]['user_name'] = 'テスト管理ユーザー0'; $result[0]['id'] = '0'; $result[0]['title'] = 'タイトル0'; $result[0]['recommends'] = '4'; $result[1]['user_name'] = 'テスト管理ユーザー1'; $result[1]['id'] = '1'; $result[1]['title'] = 'タイトル1'; $result[1]['recommends'] = '3'; //おそらくhファンクションで「htmlspecialchars」してるんでしょうが提示無かったのでそのまま返す function h($result) { return $result; } ?> <!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"> <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"> </div> <div class="tweetText"> <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> <!-- ↓全角スペースはいってました --> <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> <p>おすすめ度</p> <!-- classに「raty」nameに評価数値を挿入 --> <div class="raty" name="<?php echo h($review['recommends']); ?>"></div> </div> </div> </div> <?php endforeach; ?> </main> <!-- /jsの前に「.」をつけるか、先頭の「/」消す --> <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script> <script src="./js/jquery.raty.js"></script> <script type="text/javascript"> //class「raty」の数だけ繰り返す $(".raty").each(function() { //thisは繰り返し中の対象になっているclass「raty」 $(this).raty({ readOnly: true, number: 5, //スコアは対象になっているclass「raty」の「name」 score: $(this).attr('name'), }); }); </script> </body> </html>

  1. コメントアウトの部分に全角スペースありました
  2. サンプルソースではcssのリンクとimgファイル読み込む部分消しちゃいました
  3. おそらくhファンクションで「htmlspecialchars」してるんでしょうが提示無かったのでそのまま返しました
  4. おすすめ度classに「raty」nameに評価数値を挿入する仕様としました
  5. /jsの前に「.」をつけるか、先頭の「/」消してください
  6. class「raty」の数だけ繰り返すjs追加しました

サンプルソースの修正箇所にコメントアウトもしております


簡単に説明しますが、jsはすべてのデータを読み込んでから実行されます
ですので、すべてのデータが読み込まれた後、対象のクラスの数だけjsを実行させます
慣れるまで理解しにくいです、私もはじめは理解に苦しみました。

投稿2022/01/20 09:37

jinba

総合スコア310

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

n_k23

2022/01/20 12:41

jinba様 回答誠にありがとうございます。 返事が遅くなり誠に申し訳ありません。 無事解決しました。また説明まで記載していただいてありがとうございます。 これから頑張ってjsの仕様を勉強していきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問