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>

等

我能想到的最快的解决方案是在链接的title属性上使用$ .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);
});

P.S。为每个单独的字母使用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());
     });
});

（或类似的......）

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

1 个答案: