jquery - 通过数组对象定义的多个工具提示内容源

Question

我正在使用 jQuery UI 在页面上有多个工具提示，这些工具提示从不同的属性中获取内容。

有一个正在创建的对象，它定义了每个工具提示的来源，具体取决于它的类。

就像是：

var tooltipparam = [{"class":".one","source":"alt"}, {"class":".two","source":"title"},{"class":".three","source":"alt"}];

然后我正在循环创建工具提示，如下所示：

for (var key in tooltipparam) {

    var source = tooltipparam[key]['source'];
    $(tooltipparam[key]['class']).tooltip({
            content: function () { return $(this).attr(source) }
        });
}

但是，工具条是使用参数对象的最新设置创建的。在这种情况下，获取 alt 属性 ({"class":".three","source":"alt"} 并像这样创建所有工具提示。

我错过了什么？

这是一个jsfiddle：

http://jsfiddle.net/cmoreira/vqRH5/

谢谢您的帮助！

Answer 1

你var source是一个全局变量。当tooltip内容函数被调用时，也就是说当你的鼠标进入你的<a/>元素时，source变量的值是最后一个设置的，所以'alt'。

我不知道您的要求，但是如果您想从不同的属性中检索工具提示内容，您可以这样进行：

HTML：

<div class="tooltip" title="tooltip from title" />
<img class="tooltip" alt="tooltip from alt" src="..."/>

JS：

$(".tooltip").tooltip({
    content: function () {
        var _this = jQuery(this);
        return _this.attr('title') != '' ? 
            _this.attr('title') : _this.attr('alt');
    }
});