回答編集履歴
3
ミスがあったため修正。
answer
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
|
|
75
75
|
ele.addEventListener( 'mouseenter', function( e ) {
|
|
76
76
|
e.currentTarget.classList.add( 'mouseover' );
|
|
77
|
-
e.currentTarget.id = 'id' +
|
|
77
|
+
e.currentTarget.id = 'id' + i;
|
|
78
78
|
}, false );
|
|
79
79
|
ele.addEventListener( 'mouseleave', function( e ) {
|
|
80
80
|
e.currentTarget.classList.remove( 'mouseover' );
|
2
補足の追加。
answer
CHANGED
|
@@ -61,4 +61,29 @@
|
|
|
61
61
|
[http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e](http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)
|
|
62
62
|
|
|
63
63
|
【即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）】
|
|
64
|
-
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)
|
|
64
|
+
[http://analogic.jp/immediate-function/](http://analogic.jp/immediate-function/)
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
いっそこうも書ける。
|
|
71
|
+
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/3/](https://jsfiddle.net/dp5kc1t2/3/)
|
|
72
|
+
|
|
73
|
+
```JavaScript
|
|
74
|
+
[].forEach.call( document.getElementsByTagName( 'input' ), function( ele, i, arr ) {
|
|
75
|
+
ele.addEventListener( 'mouseenter', function( e ) {
|
|
76
|
+
e.currentTarget.classList.add( 'mouseover' );
|
|
77
|
+
e.currentTarget.id = 'id' + int;
|
|
78
|
+
}, false );
|
|
79
|
+
ele.addEventListener( 'mouseleave', function( e ) {
|
|
80
|
+
e.currentTarget.classList.remove( 'mouseover' );
|
|
81
|
+
}, false );
|
|
82
|
+
}); // IE9+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
【Array.prototype.forEach() - JavaScript | MDN】
|
|
86
|
+
[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
|
|
87
|
+
|
|
88
|
+
【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
|
|
89
|
+
[http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496](http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496)
|
1
読みやすく修正。
answer
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
`onmouseover` に書いてしまうと2つ以上の関数を登録できず上書きしてしまうので、`addEventListener` を使ったほうが良いような。
|
|
2
|
-
動くサンプル
|
|
2
|
+
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/](https://jsfiddle.net/dp5kc1t2/)
|
|
3
3
|
|
|
4
4
|
```CSS
|
|
5
5
|
.mouseover { border: 1px solid #000; };
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
---
|
|
38
38
|
|
|
39
39
|
ちなみに `i` をイベントに渡したいときは下記のようにするとできます。
|
|
40
|
-
動くサンプル
|
|
40
|
+
【動くサンプル】[https://jsfiddle.net/dp5kc1t2/1/](https://jsfiddle.net/dp5kc1t2/1/)
|
|
41
41
|
|
|
42
42
|
|
|
43
43
|
```JavaScript
|