質問編集履歴

出力したHTMLを追記

2019/01/19 11:21

投稿

miyu94

スコア18

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -229,3 +229,129 @@
 わかる方がいらっしゃいましたら、お教えください。よろしくお願いします。
+### 追記
+「該当のソースコード」を動かした場合のHTML
+```HTML
+<!--1~7までの数字をコメントした投稿-->
+<div id="comments_1">
+                <div id="list">1</div>
+                <div id="list">2</div>
+                <div id="list">3</div>
+                <div id="list">4</div>
+                <div id="list">5</div>
+                <div id="list">6</div>
+                <div id="list">7</div>
+     <div id="more_btn">さらに表示</div>
+     <div id="close_btn">戻す</div>
+</div>
+<!--A, B, C とコメントした投稿-->
+<div id="comments_2">
+                <div id="list">A</div>
+                <div id="list">B</div>
+                <div id="list">C</div>
+   <div id="more_btn">さらに表示</div>
+   <div id="close_btn">戻す</div>
+</div>
+```
+「試したこと」のコードを動かした場合
+※「コメントのリストidも、ループ回数に応じて変わるようにした」と書きましたが、コードを間違えていました。$loop->parent->iteration　とすれば Commentのループ回数ではなく、Postのループ回数にアクセスできますね。
+```PHP
+@foreach($post->comments as $comment)
+  <div id="list_{{ $loop->parent->iteration }}">{{ $comment->message }}</div>
+@endforeach
+```
+出力結果
+```HTML
+<!--1~7までの数字をコメントした投稿-->
+<div id="comments_1">
+                <div id="list_1">1</div>
+                <div id="list_1">2</div>
+                <div id="list_1">3</div>
+                <div id="list_1">4</div>
+                <div id="list_1">5</div>
+                <div id="list_1">6</div>
+                <div id="list_1">7</div>
+     <div id="more_btn">さらに表示</div>
+     <div id="close_btn">戻す</div>
+</div>
+<!--A, B, C とコメントした投稿-->
+<div id="comments_2">
+                <div id="list_2">A</div>
+                <div id="list_2">B</div>
+                <div id="list_2">C</div>
+    <div id="more_btn">さらに表示</div>
+    <div id="close_btn">戻す</div>
+</div>
+```

タグの間違い

2019/01/19 11:21

投稿

miyu94

スコア18

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

なぜか途中でとうこうされてた。

2019/01/19 09:33

投稿

miyu94

スコア18

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,11 +10,15 @@
+Postをforeachで回して投稿一覧を表示させます。
 投稿一覧ページで、各々の投稿の下に紐づくコメントを表示します。
-コメントはデフォルトで3件だけ表示し「さらに表示」ボタンを押すと追加で新たな3件が表示される仕組みです。全件表示したら「戻す」ボタンを表示し、押すとデフォルト状態に戻します。
+コメントはデフォルトで3件だけ表示し「さらに表示」ボタンを押すと追加で新たな3件が表示される仕組みです。全件表示したら「戻す」ボタンを表示し、押すとデフォルト状態に戻します。再び「さらに表示」を押すと、全件表示されます。
-再び「さらに表示」を押すと、全件表示されます。
@@ -22,15 +26,13 @@
-ループ回数に応じてコメント欄のidを変え、ループするごとにjQuery側を動作させたいですが、うまくいきません。恐らくjQueryが読み込まれるのは一度だけなので、ループごとに処理を繰り返すことができない？のかと思います。
+ループ回数に応じてコメント欄のidを変え、ループするごとにjQuery側を動作させたいのですが、うまくいきません。恐らくjQueryが読み込まれるのは一度だけなので、ループごとに処理を繰り返すことができない？のかと思います。
-とりあえずjQuery側で var iteration = 1; として、
+とりあえずjQuery側で var iteration=1; (Postのループ回数が1) としました。
-最初のforeachループ(つまり一番上の投稿)のコメントのみ正常に動作するようにしました。
+最初の投稿のコメントのみ期待通りに動作します。
@@ -148,26 +150,82 @@
+投稿をforeachした回数だけ、for文でjQueryの処理を回しました。
-PHPのループ内で現在のループ回数を変数に保持し
+現在のループ回数を保持する配列を作り
 ```PHP
+//@foreach($posts as $post)の内側
-$iteration = $loop->iteration;
+  $iterations[] = $loop->iteration;
+//@foreach($posts as $post)の外側
+  $iterations = json_encode($iterations);
-```
+```
-jQuery側でループ回数を受け取ろうとしました
+コメントのリストidも、ループ回数に応じて変わるようにしました。
-```Javascript
+```PHP
-var iteration = {{ $iteration }};
+@foreach($post->comments as $comment)
+     <div id="list_{{ $loop->iteration }}">{{ $comment->message }}</div>
+@endforeach
-```
+```
+ループ回数を保持する配列をjQueryに渡して、その回数だけfor文で回しました。
+```JavaScript
+let iterations = <?php echo $iterations; ?>;
+for(var i=0; i<iterations.length; i++){
+  　　//この中に上と同じjQueryのコードを記述
+　　　//iteration → iterations[i] とする
+　　　//list → list_iterations[i] とする
+}
+```
+これで試しましたが、コメントがデフォルトで全件表示されてしまいます。
+###
+今回のように、どの投稿のコメントなのかをjQueryが判別し、投稿のループ内で逐一jQueryを実行したい場合、どうすればよいですか。
-これだと最後のループ回数しか渡せません。
+また別の方法で実現可能でしたら教えていただきたいです。
-仮に配列にして渡すな
+わかる方がいらっしゃいましたら、お教えください。よろしくお願いします。