teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問jQueryを使って同一クラスの複数要素に対し、同じ処理を実行したい

編集履歴

質問編集履歴

5

タグ変更

2019/08/19 01:33

投稿

fkdy
fkdy

スコア11

test CHANGED
File without changes
test CHANGED
File without changes

4

変更

2019/08/19 01:33

投稿

fkdy
fkdy

スコア11

test CHANGED
File without changes
test CHANGED
@@ -71,187 +71,3 @@
71
71
 
72
72
 
73
73
  ご教示いただけますと幸いです。
74
-
75
-
76
-
77
- ###　追記
78
-
79
- 情報が少なく、失礼しました。
80
-
81
- ```javascript
82
-
83
- jQuery(function($){
84
-
85
- const API_KEY = '自分のAPI';
86
-
87
-
88
-
89
- $.getScript('https://maps.google.com/maps/api/js?key=' + API_KEY + '&libraries=places', function(){
90
-
91
- let service = new google.maps.places.PlacesService(document.createElement('div'));
92
-
93
-
94
-
95
- // 全レビュー格納所
96
-
97
- let allReview = [];
98
-
99
- // プレイスIDを持つラッパー
100
-
101
- let $review_wrap = $(".js_review_wrap");
102
-
103
- // 全レビュー出力場所
104
-
105
- let $review_all = $(".js_review_all");
106
-
107
- // ☆4以上のレビュー出力場所
108
-
109
- let $review_over4 = $(".js_review_over4");
110
-
111
-
112
-
113
- service.getDetails({
114
-
115
- // プレイスIDは投稿を想定しているためHTMLから取得
116
-
117
- placeId: $(".js_review_wrap").each(function(){$(this).data('place-id')}),
118
-
119
- fields: ['review']
120
-
121
- }, function(place, status) {
122
-
123
- if (status == google.maps.places.PlacesServiceStatus.OK) {
124
-
125
- $.each(place.reviews, function(){
126
-
127
-
128
-
129
- // レビューの氏名・レートを取得し格納
130
-
131
- let reviewObj = {};
132
-
133
- reviewObj['name'] = this.author_name;
134
-
135
- reviewObj['rate'] = this.rating;
136
-
137
-
138
-
139
- // 全レビュー格納所へin
140
-
141
- allReview.push(reviewObj);
142
-
143
- });
144
-
145
- }
146
-
147
-
148
-
149
- // 全クチコミを回す
150
-
151
- for (let key in allReview) {
152
-
153
- // 全クチコミ格納dl
154
-
155
- const $dl = $('<dl class="list-review-output" data-rate="' + allReview[key].rate + '" />');
156
-
157
- // ☆4以上の口コミ格納dl
158
-
159
- let $dl_rate_over4 = $('<div class="list-review-output" />');
160
-
161
-
162
-
163
- // レートが☆4以上なら
164
-
165
- if (allReview[key].rate >= 4) {
166
-
167
- $dl_rate_over4.append('<div class="namae">' + allReview[key].name + ' さん</div>');
168
-
169
- 　　$dl_rate_over4.append('<div class="rate" data-rate="' + allReview[key].rate + '"></div>');
170
-
171
-
172
-
173
- // ☆4以上用のdlへ入れる
174
-
175
- $review_over4.append($dl_rate_over4);
176
-
177
- }
178
-
179
-
180
-
181
- $dl.append('<div class="namae">' + allReview[key].name + '</div>');
182
-
183
- $dl.append('<div class="data">' + allReview[key].content + '</div>');
184
-
185
- // 全クチコミ用格納dlにどんどん追加する
186
-
187
- $review_all.append($dl);
188
-
189
- }
190
-
191
- });
192
-
193
- });
194
-
195
- });
196
-
197
- ```
198
-
199
-
200
-
201
- ```html
202
-
203
- <div class="js_review_wrap" data-place-id="場所のID1">
204
-
205
- <!-- 口コミレートエリア1 -->
206
-
207
- <section class="js_review_over4"></section>
208
-
209
- <!-- 口コミレートエリア1 -->
210
-
211
- </div>
212
-
213
-
214
-
215
- <div class="js_review_wrap" data-place-id="場所のID2">
216
-
217
- <!-- 口コミレートエリア2 -->
218
-
219
- <section class="js_review_over4"></section>
220
-
221
- <!-- 口コミレートエリア2 -->
222
-
223
- </div>
224
-
225
-
226
-
227
- <div class="js_review_wrap" data-place-id="場所のID3">
228
-
229
- <!-- 口コミレートエリア3 -->
230
-
231
- <section class="js_review_over4"></section>
232
-
233
- <!-- 口コミレートエリア3 -->
234
-
235
- </div>
236
-
237
- ```
238
-
239
-
240
-
241
- こういうことがしたくて。
242
-
243
- これで、複数の場所にそれぞれの口コミのレートを同一ページで出力したいです。
244
-
245
- ただ、現状ですと一番最初の場所のIDに紐づいた口コミのレートしか出力できず。
246
-
247
- ```
248
-
249
- placeId: $(".js_review_wrap").each(function(){$(this).data('place-id')})
250
-
251
- ```
252
-
253
- yamabeさんのアドバイスを受けて、上記に変えてみましたがうまくいきませんでした。。。
254
-
255
-
256
-
257
- ご教示いただけますと幸いです。

3

タグの追加をしました！

2019/08/19 01:32

投稿

fkdy
fkdy

スコア11

test CHANGED
File without changes
test CHANGED
File without changes

2

追記しました！

2019/08/14 03:07

投稿

fkdy
fkdy

スコア11

test CHANGED
File without changes
test CHANGED
@@ -178,9 +178,9 @@
178
178
 
179
179
 
180
180
 
181
- $dl.append('<dd class="namae">' + allReview[key].name + '</dd>');
181
+ $dl.append('<div class="namae">' + allReview[key].name + '</div>');
182
-
182
+
183
- $dl.append('<dd class="data">' + allReview[key].content + '</dd>');
183
+ $dl.append('<div class="data">' + allReview[key].content + '</div>');
184
184
 
185
185
  // 全クチコミ用格納dlにどんどん追加する
186
186
 

1

追記しました！よろしくお願いします

2019/08/10 08:56

投稿

fkdy
fkdy

スコア11

test CHANGED
File without changes
test CHANGED
@@ -71,3 +71,187 @@
71
71
 
72
72
 
73
73
  ご教示いただけますと幸いです。
74
+
75
+
76
+
77
+ ###　追記
78
+
79
+ 情報が少なく、失礼しました。
80
+
81
+ ```javascript
82
+
83
+ jQuery(function($){
84
+
85
+ const API_KEY = '自分のAPI';
86
+
87
+
88
+
89
+ $.getScript('https://maps.google.com/maps/api/js?key=&#039; + API_KEY + '&libraries=places', function(){
90
+
91
+ let service = new google.maps.places.PlacesService(document.createElement('div'));
92
+
93
+
94
+
95
+ // 全レビュー格納所
96
+
97
+ let allReview = [];
98
+
99
+ // プレイスIDを持つラッパー
100
+
101
+ let $review_wrap = $(".js_review_wrap");
102
+
103
+ // 全レビュー出力場所
104
+
105
+ let $review_all = $(".js_review_all");
106
+
107
+ // ☆4以上のレビュー出力場所
108
+
109
+ let $review_over4 = $(".js_review_over4");
110
+
111
+
112
+
113
+ service.getDetails({
114
+
115
+ // プレイスIDは投稿を想定しているためHTMLから取得
116
+
117
+ placeId: $(".js_review_wrap").each(function(){$(this).data('place-id')}),
118
+
119
+ fields: ['review']
120
+
121
+ }, function(place, status) {
122
+
123
+ if (status == google.maps.places.PlacesServiceStatus.OK) {
124
+
125
+ $.each(place.reviews, function(){
126
+
127
+
128
+
129
+ // レビューの氏名・レートを取得し格納
130
+
131
+ let reviewObj = {};
132
+
133
+ reviewObj['name'] = this.author_name;
134
+
135
+ reviewObj['rate'] = this.rating;
136
+
137
+
138
+
139
+ // 全レビュー格納所へin
140
+
141
+ allReview.push(reviewObj);
142
+
143
+ });
144
+
145
+ }
146
+
147
+
148
+
149
+ // 全クチコミを回す
150
+
151
+ for (let key in allReview) {
152
+
153
+ // 全クチコミ格納dl
154
+
155
+ const $dl = $('<dl class="list-review-output" data-rate="' + allReview[key].rate + '" />');
156
+
157
+ // ☆4以上の口コミ格納dl
158
+
159
+ let $dl_rate_over4 = $('<div class="list-review-output" />');
160
+
161
+
162
+
163
+ // レートが☆4以上なら
164
+
165
+ if (allReview[key].rate >= 4) {
166
+
167
+ $dl_rate_over4.append('<div class="namae">' + allReview[key].name + ' さん</div>');
168
+
169
+ 　　$dl_rate_over4.append('<div class="rate" data-rate="' + allReview[key].rate + '"></div>');
170
+
171
+
172
+
173
+ // ☆4以上用のdlへ入れる
174
+
175
+ $review_over4.append($dl_rate_over4);
176
+
177
+ }
178
+
179
+
180
+
181
+ $dl.append('<dd class="namae">' + allReview[key].name + '</dd>');
182
+
183
+ $dl.append('<dd class="data">' + allReview[key].content + '</dd>');
184
+
185
+ // 全クチコミ用格納dlにどんどん追加する
186
+
187
+ $review_all.append($dl);
188
+
189
+ }
190
+
191
+ });
192
+
193
+ });
194
+
195
+ });
196
+
197
+ ```
198
+
199
+
200
+
201
+ ```html
202
+
203
+ <div class="js_review_wrap" data-place-id="場所のID1">
204
+
205
+ <!-- 口コミレートエリア1 -->
206
+
207
+ <section class="js_review_over4"></section>
208
+
209
+ <!-- 口コミレートエリア1 -->
210
+
211
+ </div>
212
+
213
+
214
+
215
+ <div class="js_review_wrap" data-place-id="場所のID2">
216
+
217
+ <!-- 口コミレートエリア2 -->
218
+
219
+ <section class="js_review_over4"></section>
220
+
221
+ <!-- 口コミレートエリア2 -->
222
+
223
+ </div>
224
+
225
+
226
+
227
+ <div class="js_review_wrap" data-place-id="場所のID3">
228
+
229
+ <!-- 口コミレートエリア3 -->
230
+
231
+ <section class="js_review_over4"></section>
232
+
233
+ <!-- 口コミレートエリア3 -->
234
+
235
+ </div>
236
+
237
+ ```
238
+
239
+
240
+
241
+ こういうことがしたくて。
242
+
243
+ これで、複数の場所にそれぞれの口コミのレートを同一ページで出力したいです。
244
+
245
+ ただ、現状ですと一番最初の場所のIDに紐づいた口コミのレートしか出力できず。
246
+
247
+ ```
248
+
249
+ placeId: $(".js_review_wrap").each(function(){$(this).data('place-id')})
250
+
251
+ ```
252
+
253
+ yamabeさんのアドバイスを受けて、上記に変えてみましたがうまくいきませんでした。。。
254
+
255
+
256
+
257
+ ご教示いただけますと幸いです。