jquery - 如何使用 JQuery 和 AJAX 设置元素的属性？

Question

我正在编一本字典。页面包含字母表中的每个字母:

<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]”，而不是示例单词。

有人知道如何修复它或者可以提出更优雅的解决方案吗？

提前致谢。

Answer 1

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

试试这个:

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

附:对每个单独的字母使用 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());
     });
});

(或类似的东西......)