2

我正在制作字典。一页包含字母表中的每个字母：

<div class="letter" id="letter-a">
<h3><a href="#">A</a></h3>
</div>
<div class="letter" id="letter-b">
<h3><a href="#">B</a></h3>
</div>

等等

将鼠标悬停在一个字母上时，我希望弹出一个工具提示，其中包含一些以该字母开头的单词示例。

这些示例存储在一个单独的 HTML 文件中，如下所示：

<div class="letter" id="letter-a">
Abdication, Absolute, Acknowledge...
</div>
<div class="letter" id="letter-b">
Bacchus, Backbite, Beard...
</div>

等等

我能想到的最快解决方案是对链接的标题属性使用 $.get 调用，如下所示：

$('.letter a').hover(function(){
  var $this=$(this);
  var letter='letter-'+$this.text();
  letter=letter.toLowerCase();
  var url='tooltip-content.html #'+letter;
  $this.attr('title', $.get($(url).text()));
}, function(){
      //etc
  });
});

但是此代码仅在工具提示中显示“[object Object]”，而不是示例单词。

有谁知道如何解决它或可以提出更优雅的解决方案？

提前致谢。

4

1 回答 1

2

$.get返回一个jqXHR对象，而不是文本。

尝试这个：

$.get($url).done(function(txt) {
    $this.attr('title', txt);
});

ps 对每个单独的字母使用 AJAX 会很慢 - 最好一次性将示例词直接填充到title属性中：

var letters = $.get('tooltip-content.html').done(function(html) {
     var $html = $(html);     // convert to object - don't put in the DOM
     $html.each(function() {  // iterate over each div
         var id = this.id;    // extract its ID
         $(id).attr('title', $(this).contents());
     });
});

（或类似的东西...）

于 2012-11-01T16:26:05.097 回答