質問編集履歴

3

訂正

2020/05/21 14:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,379 +1,5 @@
1
- ### 前提・実現したいこと
2
-
3
- プログラミング初心者です。
1
+ 修正中
4
-
5
- 練習のために画像の枚数によって、htmlにクラスを追加し、表示を変えるということをしたいと思っています。
6
-
7
- 本当に見当違いなことをしていそうなので、お恥ずかしい限りですが、1日悩んでも解決しなかったので
8
-
9
- お力を貸していただければと思います。
10
-
11
- クラスgrid-contanerは計6つあります。そのクラス1つ1つにaタグと画像を配置しており、それぞれで要素の数が違います。
12
-
13
- その違う要素の数を取得し。1つの時はこのクラスを表示する、2つの時はこのクラス・・・と指定していきたいのですが、
14
-
15
- 要素の数が取り出せません。
16
-
17
- 複数の同一クラス名を使っていてはできないのでしょうか?
18
2
 
19
3
 
20
4
 
21
- **追記**
22
-
23
- 各子要素(divタグで分けているもの)につけているitem1などは最終的に外して、javascriptで条件に合えばCSSの.item1を適用させるために、各画像の要素ごとにclass item1などを追加しようとしています。
24
-
25
- 今かけているjavascriptの場合だと、moreというクラスを、grid-contaner内の画像の数が6枚以上の時にitem5 moreのようにitem5クラスにmoreを追加しようとしています。
26
-
27
- イメージとしては、ツイッターなどで画像を複数枚投稿する時の表示を作ってみたいのです。
28
-
29
- 1枚の時はそのまま1枚の表示、2枚の時は2枚が見えるように2分の1の表示になる、、3枚投稿すると1枚目は2分の1、2枚目3枚目は4分の1ずつに分けられて表示される。というものを再現してみたいと思っています。
30
-
31
- のため、各画像要素1枚ずつにCSSを用するためクラスを追加す。
5
+ 質問仕方に指摘がありましたの、適切な文章、コード書き直す。
32
-
33
- まずは枚数ごとに表示を変えるという記載をjavascriptでしなくてはいけないと思ったので、枚数を取得する方法が知りたいです。
34
-
35
-
36
-
37
- ### 発生している問題・エラーメッセージ
38
-
39
- .querySelectorAll('.grid-contaner')に.lengthをつけて数を調べると、6でした。
40
-
41
- おそらく、class=grid-contanerの数かと思います。
42
-
43
- そのクラス内の画像の枚数をカウントして、もしその画像が6枚以上なら、このクラスを追加するというコードを書きたいです。
44
-
45
- ```
46
-
47
- エラーメッセージ
48
-
49
- ```
50
-
51
-
52
-
53
- ### 該当のソースコード
54
-
55
-
56
-
57
- ```html
58
-
59
- <!DOCTYPE html>
60
-
61
- <html lang="en" dir="ltr">
62
-
63
- <head>
64
-
65
- <meta charset="utf-8">
66
-
67
- <link rel="stylesheet" href="photo.css">
68
-
69
- <title>photo</title>
70
-
71
- </head>
72
-
73
-
74
-
75
- <body>
76
-
77
- <p>5枚のとき</p>
78
-
79
- <div class = "grid-contaner">
80
-
81
- <div class = "item1"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
82
-
83
- <div class = "item2"><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
84
-
85
- <div class = "item3"><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
86
-
87
- <div class = "item4"><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
88
-
89
- <div class = "item5"><a href = "image/05.JPG"><img src = "image/05.JPG"></a></div>
90
-
91
- </div>
92
-
93
-
94
-
95
- <p>4枚のとき</p>
96
-
97
- <div class = "grid-contaner">
98
-
99
- <div class = "item1"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
100
-
101
- <div class = "item2"><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
102
-
103
- <div class = "item6"><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
104
-
105
- <div class = "item7"><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
106
-
107
- </div>
108
-
109
- <p>3枚のとき</p>
110
-
111
- <div class = "grid-contaner">
112
-
113
- <div class = "item1"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
114
-
115
- <div class = "item2"><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
116
-
117
- <div class = "item8"><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
118
-
119
- </div>
120
-
121
- <p>2枚のとき</p>
122
-
123
- <div class = "grid-contaner">
124
-
125
- <div class = "item9"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
126
-
127
- <div class = "item8"><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
128
-
129
- </div>
130
-
131
- <p>1枚のとき</p>
132
-
133
- <div class = "grid-contaner">
134
-
135
- <div class = "item10"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
136
-
137
- </div>
138
-
139
-
140
-
141
- <p>6枚のとき</p>
142
-
143
- <div class = "grid-contaner" >
144
-
145
- <div class = "item1"><a href = "image/01.JPG"><img src = "image/01.JPG"></a></div>
146
-
147
- <div class = "item2"><a href = "image/02.JPG"><img src = "image/02.JPG"></a></div>
148
-
149
- <div class = "item3"><a href = "image/03.JPG"><img src = "image/03.JPG"></a></div>
150
-
151
- <div class = "item4"><a href = "image/04.JPG"><img src = "image/04.JPG"></a></div>
152
-
153
- <div class = "item5"><a href = "image/05.JPG"><img src = "image/05.JPG"></a></div>
154
-
155
- <div class = "item"><a href = "image/06.JPG"><img src = "image/06.JPG"></a></div>
156
-
157
- </div>
158
-
159
-
160
-
161
- <script src="photobox.js"></script>
162
-
163
- </body>
164
-
165
- </html>
166
-
167
- ```
168
-
169
- ```Javascript
170
-
171
- let contaner = document.querySelectorAll('.grid-contaner');
172
-
173
- for (var i = 0; i < contaner.length; i++) {
174
-
175
- const numbering = contaner[i];
176
-
177
- if(numbering >= 6 == true){
178
-
179
- let overMore = document.querySelectorAll('.item5');
180
-
181
- for (let i = 0; i < overMore.length; i++) {
182
-
183
- let addMore = overMore[i];
184
-
185
- addMore.classList.add('more');
186
-
187
- }
188
-
189
- }
190
-
191
- }
192
-
193
- ```
194
-
195
- ```css
196
-
197
- .grid-contaner{
198
-
199
- display:grid;
200
-
201
- width: 600px;
202
-
203
- height: 600px;
204
-
205
- grid-template-rows: 300px 300px;
206
-
207
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
208
-
209
-
210
-
211
- }
212
-
213
-
214
-
215
- .grid-contaner img{
216
-
217
- object-fit: cover;
218
-
219
- width: 100%;
220
-
221
- height: 100%;
222
-
223
- }
224
-
225
-
226
-
227
- .item1{
228
-
229
- grid-column: 1 / 8;
230
-
231
- grid-row: 1 / 2;
232
-
233
-
234
-
235
- }
236
-
237
- .item2{
238
-
239
- grid-column: 8 / 16;
240
-
241
- grid-row: 1 / 2;
242
-
243
-
244
-
245
- }
246
-
247
- .item3{
248
-
249
- grid-column: 1 / 6;
250
-
251
- grid-row: 2 / 3;
252
-
253
- }
254
-
255
- .item4{
256
-
257
- grid-column: 6 / 11;
258
-
259
- grid-row: 2 / 3;
260
-
261
- }
262
-
263
- .item5{
264
-
265
- grid-column: 11 / 16;
266
-
267
- grid-row: 2 / 3;
268
-
269
- }
270
-
271
-
272
-
273
- .item6{
274
-
275
- grid-column: 1 / 8;
276
-
277
- grid-row: 2 / 3;
278
-
279
- }
280
-
281
-
282
-
283
- .item7{
284
-
285
- grid-column: 8 / 16;
286
-
287
- grid-row: 2 / 3;
288
-
289
- }
290
-
291
-
292
-
293
- .item8{
294
-
295
- grid-column: 1 / 16;
296
-
297
- grid-row: 2 / 3;
298
-
299
- }
300
-
301
-
302
-
303
- .item9{
304
-
305
- grid-column: 1 / 16;
306
-
307
- grid-row: 1 / 2;
308
-
309
- }
310
-
311
- .item10{
312
-
313
- grid-area: 1 / 1 / 3 / 16;
314
-
315
- }
316
-
317
-
318
-
319
- .item0{
320
-
321
- display: none;
322
-
323
- }
324
-
325
-
326
-
327
- .more p{
328
-
329
- font-size:2.5rem;
330
-
331
- display:block;
332
-
333
- position: relative;
334
-
335
- left: 70px;
336
-
337
- top: -170px;
338
-
339
- color: white;
340
-
341
- }
342
-
343
- .more{
344
-
345
- background-color: gray;
346
-
347
- }
348
-
349
- .more img{
350
-
351
- opacity: 0.6;
352
-
353
- display: block;
354
-
355
- }
356
-
357
- .more a{
358
-
359
- color: white;
360
-
361
- text-decoration: none;
362
-
363
- }
364
-
365
-
366
-
367
- ```
368
-
369
- ### 試したこと
370
-
371
- querySelectorAllをforを使って回して要素数を取ろうと思ったのですが、うまくできませんでした。
372
-
373
-
374
-
375
- ### 補足情報(FW/ツールのバージョンなど)
376
-
377
- jQueryは一回も勉強をしたことがなくわからないので、javascriptで解決したいです。
378
-
379
- これを使ったほうが良い!などもあれば合わせてご教示ください。勉強したいと思います。

2

質問の分かりにくい部分を説明する記載を追記しました。

2020/05/21 14:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,22 @@
18
18
 
19
19
 
20
20
 
21
+ **追記**
22
+
23
+ 各子要素(divタグで分けているもの)につけているitem1などは最終的に外して、javascriptで条件に合えばCSSの.item1を適用させるために、各画像の要素ごとにclass item1などを追加しようとしています。
24
+
25
+ 今かけているjavascriptの場合だと、moreというクラスを、grid-contaner内の画像の数が6枚以上の時にitem5 moreのようにitem5クラスにmoreを追加しようとしています。
26
+
27
+ イメージとしては、ツイッターなどで画像を複数枚投稿する時の表示を作ってみたいのです。
28
+
29
+ 1枚の時はそのまま1枚の表示、2枚の時は2枚が見えるように2分の1の表示になる、、3枚投稿すると1枚目は2分の1、2枚目3枚目は4分の1ずつに分けられて表示される。というものを再現してみたいと思っています。
30
+
31
+ そのため、各画像の要素1枚ずつに、CSSを適用するためにクラスを追加したいです。
32
+
33
+ まずは枚数ごとに表示を変えるという記載をjavascriptでしなくてはいけないと思ったので、枚数を取得する方法が知りたいです。
34
+
35
+
36
+
21
37
  ### 発生している問題・エラーメッセージ
22
38
 
23
39
  .querySelectorAll('.grid-contaner')に.lengthをつけて数を調べると、6でした。

1

cssの記述を追加しました。

2020/05/20 04:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -176,6 +176,180 @@
176
176
 
177
177
  ```
178
178
 
179
+ ```css
180
+
181
+ .grid-contaner{
182
+
183
+ display:grid;
184
+
185
+ width: 600px;
186
+
187
+ height: 600px;
188
+
189
+ grid-template-rows: 300px 300px;
190
+
191
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
192
+
193
+
194
+
195
+ }
196
+
197
+
198
+
199
+ .grid-contaner img{
200
+
201
+ object-fit: cover;
202
+
203
+ width: 100%;
204
+
205
+ height: 100%;
206
+
207
+ }
208
+
209
+
210
+
211
+ .item1{
212
+
213
+ grid-column: 1 / 8;
214
+
215
+ grid-row: 1 / 2;
216
+
217
+
218
+
219
+ }
220
+
221
+ .item2{
222
+
223
+ grid-column: 8 / 16;
224
+
225
+ grid-row: 1 / 2;
226
+
227
+
228
+
229
+ }
230
+
231
+ .item3{
232
+
233
+ grid-column: 1 / 6;
234
+
235
+ grid-row: 2 / 3;
236
+
237
+ }
238
+
239
+ .item4{
240
+
241
+ grid-column: 6 / 11;
242
+
243
+ grid-row: 2 / 3;
244
+
245
+ }
246
+
247
+ .item5{
248
+
249
+ grid-column: 11 / 16;
250
+
251
+ grid-row: 2 / 3;
252
+
253
+ }
254
+
255
+
256
+
257
+ .item6{
258
+
259
+ grid-column: 1 / 8;
260
+
261
+ grid-row: 2 / 3;
262
+
263
+ }
264
+
265
+
266
+
267
+ .item7{
268
+
269
+ grid-column: 8 / 16;
270
+
271
+ grid-row: 2 / 3;
272
+
273
+ }
274
+
275
+
276
+
277
+ .item8{
278
+
279
+ grid-column: 1 / 16;
280
+
281
+ grid-row: 2 / 3;
282
+
283
+ }
284
+
285
+
286
+
287
+ .item9{
288
+
289
+ grid-column: 1 / 16;
290
+
291
+ grid-row: 1 / 2;
292
+
293
+ }
294
+
295
+ .item10{
296
+
297
+ grid-area: 1 / 1 / 3 / 16;
298
+
299
+ }
300
+
301
+
302
+
303
+ .item0{
304
+
305
+ display: none;
306
+
307
+ }
308
+
309
+
310
+
311
+ .more p{
312
+
313
+ font-size:2.5rem;
314
+
315
+ display:block;
316
+
317
+ position: relative;
318
+
319
+ left: 70px;
320
+
321
+ top: -170px;
322
+
323
+ color: white;
324
+
325
+ }
326
+
327
+ .more{
328
+
329
+ background-color: gray;
330
+
331
+ }
332
+
333
+ .more img{
334
+
335
+ opacity: 0.6;
336
+
337
+ display: block;
338
+
339
+ }
340
+
341
+ .more a{
342
+
343
+ color: white;
344
+
345
+ text-decoration: none;
346
+
347
+ }
348
+
349
+
350
+
351
+ ```
352
+
179
353
  ### 試したこと
180
354
 
181
355
  querySelectorAllをforを使って回して要素数を取ろうと思ったのですが、うまくできませんでした。