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 指的是我页面顶部的

，而 .e 指的是链接(您单击以查找元素的名称)

有人有什么想法吗？
谢谢

Answer 1

var e = this.data-e

应该是

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

或

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

阅读 .data()