jQuery this.data-x不工作

Question

我有一个包含元素周期表的表格，这个jQuery，当你点击一个元素的名字，告诉你它的全名是什么。

然而，当我点击一个按钮时，什么也没有发生...我尝试过不同的语法等等，但仍然一无所获。

这是我的表格超文本标记语言的样子(class="s-4“表示字体大小: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');

阅读有关的信息

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);