html jQuery dataの取得方法について

Question

先程投稿した内容の続きになります。

数値７の入ったエリアと数値８の入ったエリアがあります。
各エリアのpに設定したdataを取得したいです。

数値７の入ったエリア（number7のp）をクリックすると７を取得できるのですが、
数値８の入ったエリア（number８のp）をクリックしても７を取得してしまいます。

jQueryで変数を取得する時のセレクタの指定がおかしいのでは？思うのですが、、、
原因がよく分かりません。

下記コードです（必要箇所のみ抜粋）

  <div id="numberArea">

    <div id="number7" >
        <p data-index=7>
          7
        </p>
     </div>

     <div id="number8">
         <p data-index=8>
          8
         </p>
     </div>
   
  </div>

<script>

$(function(){

$("#numberArea p").on('click',function(){
    var number = $("#numberArea p").data('index');
    alert(number);
  
});

</script>

その必要な情報がありましたら追記しますのでおっしゃってください。

宜しくお願いします。

Answer 1

var number = $("#numberArea p").data('index');

↑クリックイベントの先頭で毎回こいつを取り直しているのが問題。
SakumaBladesさんの回答のように「this」を使ってイベントソースを取得するのが正しい。

Answer 2

html内にnumberArea のpは2つあります。
仕様部分を確認してませんが、何も指定しないと1つ目を取ってくるようになっているのではと思います。
色々と対応の方法はありますが、
「クリックされたp自身」のようにされた方が良いかと。

対応例：

$("#numberArea div p").on('click',function(){
    var number = $(this).data('index');
    alert(number);
});

追記：
私があげた対応例ではdata属性のついていないdiv-pがあった場合にも反応してしまうので、
divにクラスを与えておき、そのクラスもclickイベントに加えてあげたほうがより確実です。
（このように冒頭でも書いたように「色々と対応方法がある」ので要件に合わせて組み方を考えてください）

Comments

[kato00]

なるほど！そういうことなんですね！ありがとうございます！！

Answer 3

$("#numberArea p").on('click',function(){
    var number = $(this).data('index');
    alert(number);
});