質問編集履歴

1

papinianusさんへのコメントのコードの追加

2019/04/05 00:54

投稿

ZZ-TOP
ZZ-TOP

スコア36

test CHANGED
File without changes
test CHANGED
@@ -130,8 +130,102 @@
130
130
 
131
131
  document.querySelector('.pi3').textContent = ((Math.PI) - (Math.PI - 3.141));
132
132
 
133
+
134
+
133
135
  </script>
134
136
 
135
137
 
136
138
 
137
139
  ```
140
+
141
+ ---
142
+
143
+
144
+
145
+ papinianusさんへのコメントのコードです。
146
+
147
+ ※コメントの方は今、記載しています。
148
+
149
+ 先にコードの方をアップしておきます。
150
+
151
+
152
+
153
+ ```JavaScript
154
+
155
+ <script>
156
+
157
+ var thumN=document.querySelectorAll('.thumb');
158
+
159
+ for(var i=0; i<thumN.length; i++){
160
+
161
+ thumN[i].onclick=function(){
162
+
163
+ console.log(this.dataset.image);
164
+
165
+ };
166
+
167
+ }
168
+
169
+ </script>
170
+
171
+
172
+
173
+ ```
174
+
175
+
176
+
177
+ ```HTML
178
+
179
+ <style>
180
+
181
+ ul{list-style-type: none;
182
+
183
+ padding: 10px;}
184
+
185
+
186
+
187
+ li{float: left;
188
+
189
+ padding: 10px;}
190
+
191
+ </style>
192
+
193
+ </head>
194
+
195
+
196
+
197
+ <img src="img1.jpg" style="padding: 20px;" id="bigimg">
198
+
199
+
200
+
201
+ <ul>
202
+
203
+ <li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
204
+
205
+ <li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
206
+
207
+ <li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
208
+
209
+ </ul>
210
+
211
+
212
+
213
+ ```
214
+
215
+ ブラウザの画面は画像の通りです。
216
+
217
+
218
+
219
+ サムネイルをクリックすればコンソールに
220
+
221
+ クリックされたサムネイル画像の値ではなく、
222
+
223
+
224
+
225
+ ひも付けされている大きい画像の値を取得して
226
+
227
+ 出力します。
228
+
229
+
230
+
231
+ ![イメージ説明](7547f71d77c8428613567264c00bd991.jpeg)