1

我有一个包含元素周期表的表，这个 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 指的是链接（单击以查找元素的名称）

有没有人有任何想法？
谢谢

4

4 回答 4

1 
var e = this.data-e

应该

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

或者

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

阅读.data()

于 2012-06-07T05:07:20.930 回答
1

您要访问的属性 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

});
});
于 2012-06-07T05:08:52.827 回答
0 
var e = this.data-e

应该

var e = $(this).attr(data-e);
于 2012-06-07T05:08:28.047 回答
0

改变这个

var e = this.data-e

有了这个

var e = $(this).attr("data-e");
于 2012-06-07T05:10:43.497 回答