javascript - 具有动态内容的 jQuery UI 工具提示

Question

我使用 jQuery UI Tooltip Widget 并且有代码:

  $(function() {$( document ).tooltip({  
    content: 'connecting',
    content:function(callback) {
            $.get('teacher.php?teacherid=' + link,{}, function(data) {
            callback(data);
        });
    },

  })});

在我的页面上我有:

<div title="" onmouseover="{link=1}">Alex Brown</div>
<div title="" onmouseover="{link=2}">John Black</div>

但是这不起作用。我如何向 JS 发送变量 Alex Brown 是 ID=1 的老师，John Black 是 ID=2 的老师？

更新:嗯，已经修复了

  <script>
  $(function() {$( document ).tooltip({ 
    show: 0,
    hide: 0,
    items: 'teacher',
    content: 'connecting',
    content: function(callback) {
            var x=$(this).attr('id') 
            $.get('teacher.php?teacherid='+x,{}, function(data) {
            callback(data);
        });
    },

  })});
  </script> 

在 HTML 中我现在有:

<teacher id="1">Alex Brown</teacher>
<teacher id="2">John Black</teacher>
<teacher id="3">Homer Simpson</teacher>

Answer 1

首先用类标记链接

<div class="teacher-link" data-teacher="1" title="1" onmouseover="{link=1}">Alex Brown</div>
<div class="teacher-link" data-teacher="2" title="2" onmouseover="{link=2}">John Black</div>

然后将工具提示卡在该类上

$(function() {$( ".teacher-link" ).tooltip({  
    content: 'connecting',
    content:function(callback) {
            var link = $(this).attr("data-teacher"); // here retrieve the id of the teacher 
            $.get('teacher.php?teacherid=' + link,{}, function(data) {
            callback(data);
        });
    },

  })});

在非 html5 页面上，您可以使用另一个属性，例如标题:

   var link = $(this).attr("title"); // here retrieve the id of the teacher