PHP jQuery Ratyで評価機能の表示

前提・実現したいこと

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) "テスト２"
23    ["recommends"]=>
24    string(1) "4"
25    ["description"]=>
26    string(12) "テスト２"
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) "テスト３"
44    ["recommends"]=>
45    string(1) "3"
46    ["description"]=>
47    string(12) "テスト３"
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

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

回答1件

ベストアンサー

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

<?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>