質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16419questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6705questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

【jQuery】変数 $this = $(this)を使うと動作しなくなる原因

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,946

umauman

score 43

jQuery初心者です。変数の使い方があまり理解できずに苦労をしております。

実現したいこと & エラー内容

リンクテキストをマウスオーバーした際に吹き出しを表示したいと思い、下記のような記述をしました。
こちらで動作をするのですが、$(this)を変数に代入すると動かなくなってしまいます。
こちら原因はどういったことなのでしょうか?

また、「$(this).next()」までを変数に代入することも可能でしょうか?(関数が入っていると無理?)

また、なかなか参考書を読んでも$(this)の使い方を理解することが難しいのですが、そもそも使い方に誤りがあるのが原因でしょうか?
「mouseover」された要素、つまり<span class="popUp">の前にある
<a href="javascript:void(0)">=$(this) という理解なのですが…。

質問を欲張ってしまい恐縮ですが、まとめると下記になります。
①$(this)に $this = $(this); という変数を使用すると動かなくなってしまう原因を知りたいです。
②出来れば①の部分に$thisNext = $(this).next(); という変数を使いたいが、こちら可能でしょうか?
③そもそも当方が記述したソースの$(this)の使い方に誤りはありますでしょうか。

色々質問しすぎかもしれませんので、③に関しては可能であればご回答いただくのでも大丈夫です。

動作する記述

var $popUp = $('.popUp');
$popUp.css({
    opacity:'0.8',
    position:'absolute',
    display:'none'
});
$popUp.prev('a').mouseover(function(){
    $(this).next().fadeIn();
}).mouseout(function(){
    $(this).next().fadeOut();
}).mousemove(function(e){
    $(this).next().css({
        'top':e.pageY+10+'px',
        'left':e.pageX+10+'px'
    })
});
.popUp{
    border: 2px solid #000000;
    padding:10px;
}
テキストテキストテキスト<a href="javascript:void(0)">クリックすると吹き出しがでる</a>
<span class="popUp">吹き出しの内容</span>テキストテキストテキスト

動作しなくなってしまう記述(その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'
    })
});

初歩的な事項かとは思いますがご教授いただけますととても助かります。

追記

回答を拝見して、追記をいたします。
こちら1ページ内に複数使用をいたします。
質問をする際にこちらの事項を入れておくべきでした。
不備があり、大変申し訳ございません。

(ご回答を1つずつ拝見しつつ、書いていただきました用語などを調べているところです。)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+11

  1. var $this = $(this);とすると、$(this)はjQueryオブジェクトに変換されたwindowオブジェクトを指すのでvar $this = $popUp.prev("a");とする必要があると思います。
  2. var $this = $popUp.next("a");というようにすれば可能ではないでしょうか?
  3. 動作する記述の場合の$(this)の使い方はあっていると思います。間違っていれば動かないのではないかと思います。

上を踏まえて動作しない記述を修正すると、次のように書けると思います。
動作しなくなってしまう記述1

<!DOCTYPE HTML>
<html lang='ja'>
<!-- https://teratail.com/questions/61908 -->
<!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
<head>
    <meta charset='UTF-8'>
    <title></title>
    <style type='text/css'>
        .popUp {
            border: 2px solid #000000;
            padding: 10px;
        }
    </style>
</head>
<body>
テキストテキストテキスト<a href="javascript:void(0)">クリックすると吹き出しがでる</a>
<span class="popUp">吹き出しの内容</span>テキストテキストテキスト
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var $popUp = $('.popUp');
    var $this = $popUp.prev("a");

    $popUp.css({
        opacity: '0.8',
        position: 'absolute',
        display: 'none'
    });

    $popUp.prev('a').mouseover(function () {
        $this.next().fadeIn();
    }).mouseout(function () {
        $this.next().fadeOut();
    }).mousemove(function (e) {
        $this.next().css({
            'top': e.pageY + 10 + 'px',
            'left': e.pageX + 10 + 'px'
        })
    });
</script>
</body>
</html>

動作しなくなってしまう記述2

<!DOCTYPE HTML>
<html lang='ja'>
<!-- https://teratail.com/questions/61908 -->
<!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
<head>
    <meta charset='UTF-8'>
    <title></title>
    <style type='text/css'>
        .popUp {
            border: 2px solid #000000;
            padding: 10px;
        }
    </style>
</head>
<body>
テキストテキストテキスト<a href="javascript:void(0)">クリックすると吹き出しがでる</a>
<span class="popUp">吹き出しの内容</span>テキストテキストテキスト
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var $popUp = $('.popUp');
    var $this = $popUp.prev("a").next();

    $popUp.css({
        opacity: '0.8',
        position: 'absolute',
        display: 'none'
    });

    $popUp.prev('a').mouseover(function () {
        $this.fadeIn();
    }).mouseout(function () {
        $this.fadeOut();
    }).mousemove(function (e) {
        $this.css({
            'top': e.pageY + 10 + 'px',
            'left': e.pageX + 10 + 'px'
        })
    });
</script>
</body>
</html>

複数ポップアップ対応版
このようにすることで複数にも対応できると思います。

<!DOCTYPE HTML>
<html lang='ja'>
<!-- https://teratail.com/questions/61908 -->
<!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
<head>
    <meta charset='UTF-8'>
    <title>タイトル</title>
    <style type='text/css'>
        .popUp {
            border: 2px solid #000000;
            padding: 10px;
        }
    </style>
</head>
<body>
テキストテキストテキスト
<a href="javascript:void(0)">
    クリックすると吹き出しがでる
</a>
<span class="popUp">吹き出しテキスト1</span>
<hr>
テキストテキストテキスト
<a href="javascript:void(0)">
    クリックすると吹き出しがでる
</a>
<span class="popUp">吹き出しテキスト2</span>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        let $popUp = $(".popUp");
        let $this = $popUp.prev("a");

        $popUp.css({
            opacity: "0.8",
            position: "absolute",
            display: "none"
        });

        $this.mouseover(function () {
            $(this).next(".popUp").fadeIn();
        }).mouseout(function () {
            $(this).next(".popUp").fadeOut();
        }).mousemove(function (e) {
            $(this).next(".popUp").css({
                "top": e.pageY + 10 + "px",
                "left": e.pageX + 10 + "px"
            });
        });
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 12:28

    こちらも複数ポップアップの考慮が漏れているのではないかと考えました。
    私も一回書いてみましたが、これじゃダメじゃねとなったので質問文のコードが完成形と回答しています。

    キャンセル

  • 2017/01/14 13:22 編集

    miyabi-sunさんに指摘していただいたとおり複数ポップアップを配置する場合の考慮をしていませんでした。複数ポップアップに対応できるコードを追記させていただきます。

    キャンセル

  • 2017/01/14 14:05

    ご回答ありがとうございます!
    質問に複数ある旨の記載漏れがあり申し訳ございませんでした。
    追加くださった定数を使う(で認識あっていますでしょうか)手法で複数対応できました。

    jQuery、CSS、HTMLを1ファイルにまとめてくださるというご丁寧なご回答いただけたこと、とても感謝しております!

    キャンセル

  • 2017/01/14 14:42

    対応ありがとうです。+しました

    キャンセル

checkベストアンサー

+7

とりあえず質問文の状態で完成されています。

なぜなら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'
    })
  });
});

こうしてこうして…こうじゃ!!
これならそこそこといった感じですかね。

別に最初の質問文のコードで良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 15:03

    質問の不備、申し訳ございません。
    複数である可能性に気づいていただきましてとても助かりました。

    記述いただきました複数の場合の書き方はとても当方の現在のスキルではさらっと記述できるものでは無く…
    教えていただきましたスコープを意識して1個1個変数を定義していくと確かに動くようにはなりましたが、これだと何のための変数なんだ、、、ということで素直に1つずつ $(this)を記述する方がいい、という理解をしたのですが認識ずれておりますでしょうか。

    これだと動作するようになったものの…↓↓↓

    $popUp.prev('a').mouseover(function(){
    $this = $(this);
    $this.next().fadeIn();
    }).mouseout(function(){
    $this = $(this);
    $this.next().fadeOut();
    }).mousemove(function(e){
    $this = $(this);
    $this.next().css({
    'top':e.pageY+10+'px',
    'left':e.pageX+10+'px'
    })
    });


    追記の中で色々と考慮された上で、質問のままのソースで良いのではないかとおっしゃっていたのが伝わってきました。(ソースは理解できていないものの…)

    あとは関数が入っていても大丈夫なのですね。この当たりもずっとモヤモヤしていたので
    教えていただいて助かりました。

    基礎の部分をもう少しがんばって勉強してみます。

    キャンセル

  • 2017/01/14 16:08

    追加の質問で恐縮なのですが、
    raccy様コメント欄に記入いただきました下記について、差し支えなければ教えていただけないでしょうか?
    (raccy様のコメント欄の方へ書いてしまったのですが…)

    >その場合は最初から「var $popUp = $('.popUp');」ではなく
    >複数形にしとけやという別のツッコミが必要そうですが。

    こちら複数箇所で使わることを変数名でも明示しておいた方がいい、という理解で正しいでしょうか?

    例えば、「var $popUps」(←複数形)等。

    変数命名に暗黙のルールみたいなものが存在するのかな、と気になりまして…。
    何度も本当に申し訳ございません。

    キャンセル

  • 2017/01/14 22:26

    > 変数名でも明示しておいた方がいい、という理解で正しいでしょうか?
    究極的にはそうです。
    プログラミングのソースコードはマシンだけではなく人間も読むためのものです。
    ソースコードは英語や数学が元になって作られた文章なので、それらの知識を使って自然に読める事が理想です。

    様々なテクニックはありますが、最終的には人が読みやすいコードがゴールです。
    良いコードはしばしば英文や数式としても読めるので、英語や数学の知識をうまく活かしましょう。
    「リーダブルコード」という書籍が評判も良いので、興味がわいたら読んでみて下さい。

    キャンセル

  • 2017/01/14 22:50

    ご返信ありがとうございます。おっしゃる通りですね。
    ご紹介いただいた書籍、調べてみましたが確かに評判が良いですね。もう少しだけ知識を増やした後に是非読んでみます。変数名をはじめ記述をどのようにすべきか答えが出せるかもしれません。
    再度、この度はありがとうございました。

    キャンセル

+7

JavaScriptのthis評価(実行)されたときの環境によって決定されるという特徴を持ちます。該当のコードでの$(this)thisが正しくイベントが発生したDOM要素を指し示すのは、mouseover()の内部でコールバックとして呼び出されたときです。つまり、コールバック関数式の中でしか、想定している正しいthisは取得できません。それ以外の所で$(this)と書いても全く別のものがthisに入っています

つまり、同じthisと書いてもコールバック関数式の中と外ではthisが示す物が異なると言うことです。なので、関数式の外で$(this)と書いても、期待していた値になりません。実際何になっているかは、cosole.log(this);という行を逐一入れてみて、コンソール上のログを見るとわかるでしょう。

では、どうするかというと、最終的に$popUp$(this).next()は同じ物になります(というよりも、$popUpを出したり消したりしたいという意図でしょう)。ですので、クロージャーの機能を利用して、そのまま$popUpを使うといいでしょう。

var $popUp = $('.popUp');
$popUp.css({
    opacity:'0.8',
    position:'absolute',
    display:'none'
});
$popUp.prev('a').mouseover(function(){
    $popUp.fadeIn();
}).mouseout(function(){
    $popUp.fadeOut();
}).mousemove(function(e){
    $popUp.css({
        'top':e.pageY+10+'px',
        'left':e.pageX+10+'px'
    })
});

対象が複数あるとうまくいかないので、対応版作りました。

$('.popUp').each(function(idx, elem) {
  var $popUp = $(elem);
  $popUp.css({
      opacity:'0.8',
      position:'absolute',
      display:'none'
  });
  $popUp.prev('a').mouseover(function(){
      $popUp.fadeIn();
  }).mouseout(function(){
      $popUp.fadeOut();
  }).mousemove(function(e){
      $popUp.css({
          'top':e.pageY+10+'px',
          'left':e.pageX+10+'px'
      })
  });
});

さらにおまけ。非常にjQueryらしくないですが。(動作にはChrome推奨)

const $popUp = $('.popUp');
const nextF = f => e => f($(e.currentTarget).next(), e);
$popUp.css({
    opacity:'0.8',
    position:'absolute',
    display:'none'
});
$popUp.prev('a')
    .mouseover(nextF(d => d.fadeIn()))
    .mouseout(nextF(d => d.fadeOut()))
    .mousemove(nextF((d, e) => d.css({
        'top':e.pageY+10+'px',
        'left':e.pageX+10+'px'
    })));

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 12:00 編集

    この解決法では、ページ内に複数の「ポップアップと開閉リンク」のセットがあった場合に誤作動の原因になりそうです。
    その場合は最初から「var $popUp = $('.popUp');」ではなく複数形にしとけやという別のツッコミが必要そうですが。

    なので、やるとすれば二次元配列みたいな、ポップアップとリンクのセットになった変数を作成
    各々にイベントと引数を設定してやらせる方法を考えました。
    しかし、ソースコードがめっちゃ汚くなると判断し、現状のコードが完成形と回答しています。

    キャンセル

  • 2017/01/14 12:28

    あ、複数は考えてなかったです。

    キャンセル

  • 2017/01/14 12:44

    対応ありがとうございます。
    私もウンウン唸って似たようなところに着地しました。

    キャンセル

  • 2017/01/14 13:11

    jQueryの作法としてはthisのままの方がいいんでしょうね。私としてはコールバック内のthisは信用しない(というか、何がthisになるかいちいち調べるのが面倒)派なので、やるとしたら、eventからcurrentTargetかな…。

    キャンセル

  • 2017/01/14 14:51

    ご回答いただきましてありがとうございます。
    同一ページに複数ある旨の説明ができておらず申し訳ございませんでした。
    最初の記述も1つの場合はうまくいきました。
    追記いただいたもので複数パターンでも問題無く動作いたしました。

    関数式の外に記述していたため、機能しなかったのですね…
    手元にある教本が初心者向けであるから?かDOM等々に関する説明が無いのですが、
    ご回答の中にあるキーワードが要の部分であるように思いますので
    色々と調べてみるようにいたします。

    「さらにおまけ」もありがとうございます。
    初心者にはハードルが高いですが、読み解けるようになれるようがんばります。

    複数の場合は変数名を複数とわかるようにつける…というのが慣例なのでしょうか。
    その当たりも無知でした。

    キャンセル

+3

私も作ってみました。
https://jsfiddle.net/mkeisuke/k7Lb6huL/

クラス名を少し変えて、CSSを外に出しました。
こんな感じでいかがでしょう?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 15:10

    わざわざ作っていただきましてありがとうございます!
    CSSの部分は確かに素直にCSS側で記述してあげる方がいいのかもしれなかったですね。
    作っていただいたものをコピーして複数パターンもためしてみたのですが、こちらで問題無く動作いたしました。
    a要素にclassを付与することにより、スクリプト側がシンプルになるのですね。
    色々な手法があるのだと勉強になりました。

    キャンセル

+3

console.log(this)で、何を指示しているのか確認できるので、thisを使いたい箇所で確認を取ってみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/15 18:16

    ご回答ありがとうございます。

    デバッグ方法についてちゃんと調べないまま質問してしまったことを反省をしつつ、まさにconsole.log(this)の使い方やChromeやfirefoxの開発ツールの使い方等々を調べているところでした。
    ただ、なかなか表示方法がわからず…。

    jsファイル(外部ファイル)に下記のように追加した上でブラウザでHTMLファイルを開き、ブラウザの開発ツールの「console」パネルを開いているのですが、表示されず。
    HTMLのheadに直接「console.log("hello world!")」を記述したところconsoleパネルで「Hello world」が表示されました。
    外部ファイルだと無理だったりするのでしょうか。

    var $popUp = $('.popUp');
    var $this = $(this);
    $popUp.css({
    opacity:'0.8',
    position:'absolute',
    display:'none'
    });
    $popUp.prev('a').mouseover(function(){
    $this.next().fadeIn();
    console.log(this); //←追加
    }).mouseout(function(){
    $this.next().fadeOut();
    }).mousemove(function(e){
    $this.next().css({
    'top':e.pageY+10+'px',
    'left':e.pageX+10+'px'
    })
    });

    何か根本的に間違えているのかもしれません。

    もうちょっと自力でがんばってみて表示の仕方がわからない場合はまた新たに質問をしてみようかと思っているところです。
    悲しいことにこんなレベルの初心者であります…

    キャンセル

  • 2017/01/15 23:12

    開発ツールのコンソールを見る、で合ってます。
    ただ、mouseoverイベント内にconsole.logがあるので、マウスオーバーイベントを起こさないとコンソールには何も表示されません。

    キャンセル

  • 2017/01/16 00:25

    再度のご回答本当にありがとうございます!

    HTML側でa要素のhref属性に指定していた"javascript:void(0)"を外し、
    イベントを起こしたら表示されるようになりました。

    ただ、動作するもの、動作しなかったもの、両方とも
    mouseoverイベント、mouseoutイベント、mousemoveイベントすべてにおいて
    同じ表示がなされるため、ここでまた謎がうまれているのですが…

    全部下記が表示されます
    ↓↓↓
    <a href>

    ただ、とりあえず表示までこぎつけたのでとても嬉しいです!また長時間格闘するところでした。
    本当にありがとうございました!

    キャンセル

  • 2017/01/16 00:40

    試しに、複数あるaタグそれぞれに違うidを割り振ってみると違いが分かるかなと思います。

    キャンセル

  • 2017/01/16 01:12

    遅い時間までお付き合いいただきまして本当にすみません。

    教えていただいた方法で、どの<a href>なのかを限定することができるようになりました。
    動くもの、動かないもので、それぞれに割り振ったidが個別に表示されているのでやはり動かない謎は残ってはいるものの、$(this)に関してもうちょっと勉強をする必要があるのかな、と感じています。

    おかげさまでconsole.logを表示することができ、さらに要素を限定するコツを勉強できたことはとても大きな収穫です!
    再度、本当にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16419questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6705questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。