質問編集履歴
1
papinianusさんへのコメントのコードの追加
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)
|