我正在编一本字典。页面包含字母表中的每个字母:
<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]”,而不是示例单词。
有人知道如何修复它或者可以提出更优雅的解决方案吗?
提前致谢。
最佳答案
$.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());
});
});
(或类似的东西......)
关于jquery - 如何使用 JQuery 和 AJAX 设置元素的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13181294/