質問編集履歴
1
papinianusさんへのコメントのコードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -64,6 +64,53 @@
|
|
|
64
64
|
document.querySelector('.pi2').textContent = (Math.PI - (Math.PI - 3.14)); //1
|
|
65
65
|
document.querySelectorAll('.pi2A').textContent = (Math.PI - (Math.PI - 3.14)); //2
|
|
66
66
|
document.querySelector('.pi3').textContent = ((Math.PI) - (Math.PI - 3.141));
|
|
67
|
+
|
|
67
68
|
</script>
|
|
68
69
|
|
|
69
|
-
```
|
|
70
|
+
```
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
papinianusさんへのコメントのコードです。
|
|
74
|
+
※コメントの方は今、記載しています。
|
|
75
|
+
先にコードの方をアップしておきます。
|
|
76
|
+
|
|
77
|
+
```JavaScript
|
|
78
|
+
<script>
|
|
79
|
+
var thumN=document.querySelectorAll('.thumb');
|
|
80
|
+
for(var i=0; i<thumN.length; i++){
|
|
81
|
+
thumN[i].onclick=function(){
|
|
82
|
+
console.log(this.dataset.image);
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
```HTML
|
|
90
|
+
<style>
|
|
91
|
+
ul{list-style-type: none;
|
|
92
|
+
padding: 10px;}
|
|
93
|
+
|
|
94
|
+
li{float: left;
|
|
95
|
+
padding: 10px;}
|
|
96
|
+
</style>
|
|
97
|
+
</head>
|
|
98
|
+
|
|
99
|
+
<img src="img1.jpg" style="padding: 20px;" id="bigimg">
|
|
100
|
+
|
|
101
|
+
<ul>
|
|
102
|
+
<li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
|
|
103
|
+
<li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
|
|
104
|
+
<li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
|
|
105
|
+
</ul>
|
|
106
|
+
|
|
107
|
+
```
|
|
108
|
+
ブラウザの画面は画像の通りです。
|
|
109
|
+
|
|
110
|
+
サムネイルをクリックすればコンソールに
|
|
111
|
+
クリックされたサムネイル画像の値ではなく、
|
|
112
|
+
|
|
113
|
+
ひも付けされている大きい画像の値を取得して
|
|
114
|
+
出力します。
|
|
115
|
+
|
|
116
|
+
|