質問編集履歴
3
出力したHTMLを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -113,4 +113,67 @@
|
|
|
113
113
|
|
|
114
114
|
また別の方法で実現可能でしたら教えていただきたいです。
|
|
115
115
|
|
|
116
|
-
わかる方がいらっしゃいましたら、お教えください。よろしくお願いします。
|
|
116
|
+
わかる方がいらっしゃいましたら、お教えください。よろしくお願いします。
|
|
117
|
+
|
|
118
|
+
### 追記
|
|
119
|
+
「該当のソースコード」を動かした場合のHTML
|
|
120
|
+
```HTML
|
|
121
|
+
<!--1~7までの数字をコメントした投稿-->
|
|
122
|
+
<div id="comments_1">
|
|
123
|
+
<div id="list">1</div>
|
|
124
|
+
<div id="list">2</div>
|
|
125
|
+
<div id="list">3</div>
|
|
126
|
+
<div id="list">4</div>
|
|
127
|
+
<div id="list">5</div>
|
|
128
|
+
<div id="list">6</div>
|
|
129
|
+
<div id="list">7</div>
|
|
130
|
+
<div id="more_btn">さらに表示</div>
|
|
131
|
+
<div id="close_btn">戻す</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<!--A, B, C とコメントした投稿-->
|
|
135
|
+
<div id="comments_2">
|
|
136
|
+
<div id="list">A</div>
|
|
137
|
+
<div id="list">B</div>
|
|
138
|
+
<div id="list">C</div>
|
|
139
|
+
<div id="more_btn">さらに表示</div>
|
|
140
|
+
<div id="close_btn">戻す</div>
|
|
141
|
+
</div>
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
「試したこと」のコードを動かした場合
|
|
145
|
+
|
|
146
|
+
※「コメントのリストidも、ループ回数に応じて変わるようにした」と書きましたが、コードを間違えていました。$loop->parent->iteration とすれば Commentのループ回数ではなく、Postのループ回数にアクセスできますね。
|
|
147
|
+
|
|
148
|
+
```PHP
|
|
149
|
+
@foreach($post->comments as $comment)
|
|
150
|
+
<div id="list_{{ $loop->parent->iteration }}">{{ $comment->message }}</div>
|
|
151
|
+
@endforeach
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
出力結果
|
|
155
|
+
|
|
156
|
+
```HTML
|
|
157
|
+
<!--1~7までの数字をコメントした投稿-->
|
|
158
|
+
<div id="comments_1">
|
|
159
|
+
<div id="list_1">1</div>
|
|
160
|
+
<div id="list_1">2</div>
|
|
161
|
+
<div id="list_1">3</div>
|
|
162
|
+
<div id="list_1">4</div>
|
|
163
|
+
<div id="list_1">5</div>
|
|
164
|
+
<div id="list_1">6</div>
|
|
165
|
+
<div id="list_1">7</div>
|
|
166
|
+
<div id="more_btn">さらに表示</div>
|
|
167
|
+
<div id="close_btn">戻す</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<!--A, B, C とコメントした投稿-->
|
|
171
|
+
<div id="comments_2">
|
|
172
|
+
<div id="list_2">A</div>
|
|
173
|
+
<div id="list_2">B</div>
|
|
174
|
+
<div id="list_2">C</div>
|
|
175
|
+
<div id="more_btn">さらに表示</div>
|
|
176
|
+
<div id="close_btn">戻す</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
```
|
2
タグの間違い
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
1
なぜか途中でとうこうされてた。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,18 +4,19 @@
|
|
|
4
4
|
|
|
5
5
|
投稿(Post)に対して、複数のコメント(Comment)があります。
|
|
6
6
|
|
|
7
|
+
Postをforeachで回して投稿一覧を表示させます。
|
|
8
|
+
|
|
7
9
|
投稿一覧ページで、各々の投稿の下に紐づくコメントを表示します。
|
|
8
|
-
コメントはデフォルトで3件だけ表示し「さらに表示」ボタンを押すと追加で新たな3件が表示される仕組みです。全件表示したら「戻す」ボタンを表示し、押すとデフォルト状態に戻します。
|
|
9
|
-
再び「さらに表示」を押すと、全件表示されます。
|
|
10
10
|
|
|
11
|
+
コメントはデフォルトで3件だけ表示し「さらに表示」ボタンを押すと追加で新たな3件が表示される仕組みです。全件表示したら「戻す」ボタンを表示し、押すとデフォルト状態に戻します。再び「さらに表示」を押すと、全件表示されます。
|
|
12
|
+
|
|
11
13
|
### 発生している問題
|
|
12
14
|
|
|
13
|
-
ループ回数に応じてコメント欄のidを変え、ループするごとにjQuery側を動作させたいですが、うまくいきません。恐らくjQueryが読み込まれるのは一度だけなので、ループごとに処理を繰り返すことができない？のかと思います。
|
|
15
|
+
ループ回数に応じてコメント欄のidを変え、ループするごとにjQuery側を動作させたいのですが、うまくいきません。恐らくjQueryが読み込まれるのは一度だけなので、ループごとに処理を繰り返すことができない？のかと思います。
|
|
14
16
|
|
|
15
|
-
とりあえずjQuery側で var iteration
|
|
17
|
+
とりあえずjQuery側で var iteration=1; (Postのループ回数が1) としました。
|
|
16
|
-
最初の
|
|
18
|
+
最初の投稿のコメントのみ期待通りに動作します。
|
|
17
19
|
|
|
18
|
-
|
|
19
20
|
### 該当のソースコード
|
|
20
21
|
|
|
21
22
|
```PHP
|
|
@@ -73,15 +74,43 @@
|
|
|
73
74
|
|
|
74
75
|
### 試したこと
|
|
75
76
|
|
|
77
|
+
投稿をforeachした回数だけ、for文でjQueryの処理を回しました。
|
|
78
|
+
|
|
76
|
-
|
|
79
|
+
現在のループ回数を保持する配列を作り
|
|
80
|
+
|
|
77
81
|
```PHP
|
|
82
|
+
//@foreach($posts as $post)の内側
|
|
78
|
-
$
|
|
83
|
+
$iterations[] = $loop->iteration;
|
|
84
|
+
|
|
85
|
+
//@foreach($posts as $post)の外側
|
|
86
|
+
$iterations = json_encode($iterations);
|
|
79
87
|
```
|
|
80
88
|
|
|
81
|
-
|
|
89
|
+
コメントのリストidも、ループ回数に応じて変わるようにしました。
|
|
90
|
+
|
|
82
|
-
```
|
|
91
|
+
```PHP
|
|
83
|
-
|
|
92
|
+
@foreach($post->comments as $comment)
|
|
93
|
+
<div id="list_{{ $loop->iteration }}">{{ $comment->message }}</div>
|
|
94
|
+
@endforeach
|
|
84
95
|
```
|
|
85
96
|
|
|
97
|
+
ループ回数を保持する配列をjQueryに渡して、その回数だけfor文で回しました。
|
|
98
|
+
|
|
99
|
+
```JavaScript
|
|
100
|
+
let iterations = <?php echo $iterations; ?>;
|
|
101
|
+
|
|
102
|
+
for(var i=0; i<iterations.length; i++){
|
|
103
|
+
//この中に上と同じjQueryのコードを記述
|
|
104
|
+
//iteration → iterations[i] とする
|
|
105
|
+
//list → list_iterations[i] とする
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
これで試しましたが、コメントがデフォルトで全件表示されてしまいます。
|
|
110
|
+
###
|
|
111
|
+
|
|
112
|
+
今回のように、どの投稿のコメントなのかをjQueryが判別し、投稿のループ内で逐一jQueryを実行したい場合、どうすればよいですか。
|
|
113
|
+
|
|
86
|
-
|
|
114
|
+
また別の方法で実現可能でしたら教えていただきたいです。
|
|
115
|
+
|
|
87
|
-
|
|
116
|
+
わかる方がいらっしゃいましたら、お教えください。よろしくお願いします。
|