回答編集履歴
2
追記したコードに誤りがあったのでリファクタリング＋修正
answer
CHANGED
|
@@ -44,20 +44,16 @@
|
|
|
44
44
|
このくらいサラッと書けないならば質問文のコードで我慢しましょうという話ですし、
|
|
45
45
|
さらっと書ける人は質問文のコードの方が綺麗なので作った下記のコードを削除するという話です。
|
|
46
46
|
|
|
47
|
-
他にスマートな良い方法はないのですかね？
|
|
48
|
-
jQuery自体がそれ関係ではスマートなのであまり考える必要はなさそうですが…
|
|
49
|
-
|
|
50
47
|
```JavaScript
|
|
51
|
-
var $popUpSets = $(".popUp").get().map(function(popUp){
|
|
52
|
-
return {
|
|
53
|
-
popUp: $(popUp),
|
|
54
|
-
|
|
48
|
+
$(".popUp")
|
|
55
|
-
|
|
49
|
+
.css({
|
|
50
|
+
opacity:'0.8',
|
|
51
|
+
position:'absolute',
|
|
52
|
+
display:'none'
|
|
56
|
-
})
|
|
53
|
+
})
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
.each(function(){
|
|
59
|
-
var $popUp = $
|
|
55
|
+
var $popUp = $(this);
|
|
60
|
-
var $button = $
|
|
56
|
+
var $button = $popUp.prev('a');
|
|
61
57
|
$button.mouseover(function(){
|
|
62
58
|
$popUp.fadeIn();
|
|
63
59
|
}).mouseout(function(){
|
|
@@ -69,4 +65,9 @@
|
|
|
69
65
|
})
|
|
70
66
|
});
|
|
71
67
|
});
|
|
72
|
-
```
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
こうしてこうして…こうじゃ！！
|
|
71
|
+
これならそこそこといった感じですかね。
|
|
72
|
+
|
|
73
|
+
別に最初の質問文のコードで良いと思います。
|
1
複数ポップアップ考慮を追記
answer
CHANGED
|
@@ -36,4 +36,37 @@
|
|
|
36
36
|
var $next = $(this).next();
|
|
37
37
|
$next.fadeIn();
|
|
38
38
|
})
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
# 追記: 複数ポップアップがある場合を想定したゴリ押し解決策
|
|
42
|
+
|
|
43
|
+
無理やり配列にして固めなおしてます。
|
|
44
|
+
このくらいサラッと書けないならば質問文のコードで我慢しましょうという話ですし、
|
|
45
|
+
さらっと書ける人は質問文のコードの方が綺麗なので作った下記のコードを削除するという話です。
|
|
46
|
+
|
|
47
|
+
他にスマートな良い方法はないのですかね？
|
|
48
|
+
jQuery自体がそれ関係ではスマートなのであまり考える必要はなさそうですが…
|
|
49
|
+
|
|
50
|
+
```JavaScript
|
|
51
|
+
var $popUpSets = $(".popUp").get().map(function(popUp){
|
|
52
|
+
return {
|
|
53
|
+
popUp: $(popUp),
|
|
54
|
+
button: $(popUp).next()
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
$popUpSets.forEach(function($popUpSet){
|
|
59
|
+
var $popUp = $popUpSet.popUp;
|
|
60
|
+
var $button = $popUpSet.button;
|
|
61
|
+
$button.mouseover(function(){
|
|
62
|
+
$popUp.fadeIn();
|
|
63
|
+
}).mouseout(function(){
|
|
64
|
+
$popUp.fadeOut();
|
|
65
|
+
}).mousemove(function(e){
|
|
66
|
+
$popUp.css({
|
|
67
|
+
'top': e.pageY+10+'px',
|
|
68
|
+
'left': e.pageX+10+'px'
|
|
69
|
+
})
|
|
70
|
+
});
|
|
71
|
+
});
|
|
39
72
|
```
|