javascript - jQuery this.data-x が機能しない

Question

私は周期表を含むテーブルを持っています。この jQuery は、要素の名前をクリックすると、そのフルネームが何であるかを教えてくれます。

ただし、クリックしても何も起こりません...別の構文などを試しましたが、まだ何も起こりません。

私のテーブル HTML は次のようになります (class="s-4" は font-size:4 を意味します; - この質問には何の意味もありません):

<td class="s-4"><a class="e" href="#" data-e="B">B</a></td>
<td class="s-4"><a class="e" href="#" data-e="C">C</a></td>
<td class="s-4"><a class="e" href="#" data-e="N">N</a></td>
<td class="s-4"><a class="e" href="#" data-e="O">O</a></td>
<td class="s-4"><a class="e" href="#" data-e="F">F</a></td>
<td class="s-4"><a class="e" href="#" data-e="Ne">Ne</a></td>

そして、ここに私のjQuery / JavaScriptがどのように見えるかがあります:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".e").click(function() {
    var e = this.data-e;
      if(e == 'H') { $("#a").html('H is Hydrogen'); }
      if(e == 'He') { $("#a").html('He is Helium'); }
      if(e == 'Li') { $("#a").html('Li is Lithium'); }
      if(e == 'Be') { $("#a").html('Be is Beryllium'); }
      if(e == 'B') { $("#a").html('B is Boron'); }
      if(e == 'C') { $("#a").html('C is Carbon'); }
      if(e == 'N') { $("#a").html('N is Nitrogen'); }
etc etc... and then

    });
    });
    </script>

#a は私のページの上部にある <h1> を指し、.e はリンクを指します (要素の名前を見つけるためにクリックします)。

誰にもアイデアはありますか？
ありがとう

Answer 1

var e = this.data-e

する必要があります

var e = $(this).data('e');

また

var e = $(this).attr('data-e');

.data()について読む

Answer 2

アクセスしようとしている属性 data-e のコード内の構文が間違っています。

間違った構文

var e = this.data-e;

正しい構文

var e =  $(this).attr(data-e);

あなたのコードは

$(document).ready(function() {
$(".e").click(function() {
var e = $(this).attr(data-e);
    if(e == 'H') { $("#a").html('H is Hydrogen'); }
  if(e == 'He') { $("#a").html('He is Helium'); }
  if(e == 'Li') { $("#a").html('Li is Lithium'); }
  if(e == 'Be') { $("#a").html('Be is Beryllium'); }
  if(e == 'B') { $("#a").html('B is Boron'); }
  if(e == 'C') { $("#a").html('C is Carbon'); }
  if(e == 'N') { $("#a").html('N is Nitrogen'); }
etc etc... and then

});
});

Answer 3

var e = this.data-e

する必要があります

var e = $(this).attr(data-e);

Answer 4

これを変える

var e = this.data-e

これで

var e = $(this).attr("data-e");