質問: $(this).next(); //←変数を追加(.next();までを代入) $popUp.css({ opacity:'0.8', position:'absolute', display:'none' }); $popUp.prev('a').mouseover(function(){ $thisNext.fadeIn(); //←$(this)を$thisNextに変更 }).mouseout(function(){ $thisNext.fadeOut(); //←$(this)を$thisNextに変更 }).mousemove(function(e){ $thisNext.css({ //←$(this)を$thisNextに変更 'top':e.pageY+10+'px', 'left':e.pageX+10+'px' }) }); ``` 初歩的な事項かとは思いますがご教授いただけますととても助かります。 ### **追記** 回答を拝見して、追記をいたします。 こちら1ページ内に複数使用をいたします。 質問をする際にこちらの事項を入れておくべきでした。 不備があり、大変申し訳ございません。 (ご回答を1つずつ拝見しつつ、書いていただきました用語などを調べているところです。)
回答: とりあえず質問文の状態で完成されています。 なぜなら`mouseover`を始めとするマウス操作のイベントが走ったタイミングで、 その要素の次の要素の表示、非表示を切り替えるというロジックなので、 関数の外から予めその要素の次の要素に該当する変数を用意しておくことは非常に困難です。 関数実行時に`$(this).next()`と叩くのが非常に健全で、 それを崩すと数十行のコードの割に動作も遅く全くの無意味なコードに成り下がってしまいます。 そもそもJavaScriptのthisってなんやねんというところの勉強が必要ですね。 関数が実行される時のスコープがthisになります。 正常系のコードを見てみましょうか。 ``` $popUp.prev('a').mouseover(function(){ $(this).next().fadeIn(); }) ``` この`function(){}`と宣言された、使い捨ての関数(無名関数)の中では `this = $popUp.prev('a')の要素`となるようにjQueryのライブラリが調整してくれています。 なので、無名関数では`$(this)`と`$popUp.prev('a')`はほぼおなじ存在として扱えます。 別に関数が入ってても大丈夫です。 下の2つはどちらでも動作します。 ``` $popUp.prev('a').mouseover(function(){ var $this = $(this); $this.next().fadeIn(); }) $popUp.prev('a').mouseover(function(){ var $next = $(this).next(); $next.fadeIn(); }) ``` 追記: 複数ポップアップがある場合を想定したゴリ押し解決策 ============================== 無理やり配列にして固めなおしてます。 このくらいサラッと書けないならば質問文のコードで我慢しましょうという話ですし、 さらっと書ける人は質問文のコードの方が綺麗なので作った下記のコードを削除するという話です。 ``` $(".popUp") .css({ opacity:'0.8', position:'absolute', display:'none' }) .each(function(){ var $popUp = $(this); var $button = $popUp.prev('a'); $button.mouseover(function(){ $popUp.fadeIn(); }).mouseout(function(){ $popUp.fadeOut(); }).mousemove(function(e){ $popUp.css({ 'top': e.pageY+10+'px', 'left': e.pageX+10+'px' }) }); }); ``` こうしてこうして...こうじゃ!! これならそこそこといった感じですかね。 別に最初の質問文のコードで良いと思います。