Question

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

然而，当我点击一个没有任何事情发生...我尝试了不同的语法等但仍然没有。

这是我的表格HTML的样子（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指的是＆lt; h1＆gt;在我的页面顶部，.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");

jQuery this.data-x无效

4 个答案: