jQuery初心者です。変数の使い方があまり理解できずに苦労をしております。
###実現したいこと & エラー内容
リンクテキストをマウスオーバーした際に吹き出しを表示したいと思い、下記のような記述をしました。
こちらで動作をするのですが、$(this)を変数に代入すると動かなくなってしまいます。
こちら原因はどういったことなのでしょうか？
また、「$(this).next()」までを変数に代入することも可能でしょうか？（関数が入っていると無理？）
また、なかなか参考書を読んでも$(this)の使い方を理解することが難しいのですが、そもそも使い方に誤りがあるのが原因でしょうか？
「mouseover」された要素、つまり<span class="popUp">の前にある
<a href="javascript:void(0)">=$(this) という理解なのですが…。
質問を欲張ってしまい恐縮ですが、まとめると下記になります。
①$(this)に $this = $(this); という変数を使用すると動かなくなってしまう原因を知りたいです。
②出来れば①の部分に$thisNext = $(this).next(); という変数を使いたいが、こちら可能でしょうか？
③そもそも当方が記述したソースの$(this)の使い方に誤りはありますでしょうか。
色々質問しすぎかもしれませんので、③に関しては可能であればご回答いただくのでも大丈夫です。
###動作する記述
javascript
1var $popUp = $('.popUp');
2$popUp.css({
3 opacity:'0.8',
4 position:'absolute',
5 display:'none'
6});
7$popUp.prev('a').mouseover(function(){
8 $(this).next().fadeIn();
9}).mouseout(function(){
10 $(this).next().fadeOut();
11}).mousemove(function(e){
12 $(this).next().css({
13 'top':e.pageY+10+'px',
14 'left':e.pageX+10+'px'
15 })
16});
17
css
1.popUp{
2 border: 2px solid #000000;
3 padding:10px;
4}
5
html
1テキストテキストテキスト<a href="javascript:void(0)">クリックすると吹き出しがでる</a>
2<span class="popUp">吹き出しの内容</span>テキストテキストテキスト
3
###動作しなくなってしまう記述（その1）
var $popUp = $('.popUp');
var $this = $(this); //←変数を追加
$popUp.css({
opacity:'0.8',
position:'absolute',
display:'none'
});
$popUp.prev('a').mouseover(function(){
$this.next().fadeIn(); //←$(this)を$thisに変更
}).mouseout(function(){
$this.next().fadeOut(); //←$(this)を$thisに変更
}).mousemove(function(e){
$this.next().css({ //←$(this)を$thisに変更
'top':e.pageY+10+'px',
'left':e.pageX+10+'px'
})
});
###動作しなくなってしまう記述（その2）
var $popUp = $('.popUp');
var $thisNext = $(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'
})
});
初歩的な事項かとは思いますがご教授いただけますととても助かります。
###追記
回答を拝見して、追記をいたします。
こちら１ページ内に複数使用をいたします。
質問をする際にこちらの事項を入れておくべきでした。
不備があり、大変申し訳ございません。
（ご回答を１つずつ拝見しつつ、書いていただきました用語などを調べているところです。）
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/14 03:28
2017/01/14 05:03 編集
2017/01/14 05:05
2017/01/14 05:42