jquery - 在工具提示中显示图像

Question

我正在使用醉酒插件

---

---

如果有人悬停他的链接，我想显示用户的图像。现在链接有一个id，图像通过该 id 存储在服务器中。因此，例如，如果id为4，则图像将为4.jpg，所以我使用此代码将工具提示显示为：

$('.tipsy').tipsy({
        html: true,
        gravity : 'e',
        title: function() {
            var i=0;
            alert(++i + "   first");
            var imgPath='<img height="50" width="50" src="dp/' + $(this).attr('id') + '.jpg" />';
            try{
                imgPath=$(imgPath).error(function() {
                    alert(++i + "  middle");
                    //imgPath='<img height="50" width="50" src="dp/no-image.jpg" />';
                });
            }catch(err){
                alert('inside catch');
            }
            alert(++i + "   last");
            return imgPath; 
        }
    });

但是imgPath永远不会出现<img height="50" width="50" src="dp/no-image.jpg" />但从技术上讲，如果存在错误但每次都显示它会采用noimage.jpg的值我用 src 作为<id>.jpg的 img

还有一件事我注意到了......没有错误时的顺序是：

1. 警报（++i +“第一”）；

2. 警报（++i +“最后”）；

   并且出现错误时的顺序是：

   1. 警报（++i +“第一”）；
   2. 警报（++i +“最后”）；
   3. 警报（++i +“中间”）；

这是错误的，因为中间警报介于第一个和最后一个之间

Answer 1

我真的不知道为什么没有捕获异常。但是对于工具提示上的任何动态内容，您可以尝试这些插件：

http://craigsworks.com/projects/simpletip/

http://jquery.bassistance.de/tooltip/demo/

希望它有所帮助。

Answer 2

由于某种原因，您的错误函数似乎被异步调用。我不确定为什么会这样，可能它可能在 jquery 文档中，但你可以做的是使用 ajax() 函数强制同步检查

alert("first");
var imgPath; //not setting imgPath here
        try{ 
            //using ajax() instead of earlier code
            $.ajax({
                url: 'dp/' + $(this).attr('id') + '.jpg', //might need to give absolute path instead of relative one
                type: 'get',
                async:false, //making sync call to ensure this code is executed
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    imgPath='no-image.jpg'; //if image doesnt exists then set no-image
                    alert("middle-error");
                },
                success: function(data){
                    imgPath='dp/' + $(this).attr('id') + '.jpg'; //succes -set required                    
                    alert("middle-success");
                }
            });
        }catch(err){ 
            alert('inside catch'); 
        } 
alert(" last"); 

我们在这里所做的是检查图像（例如 dp/4.jpg）是否存在于服务器上。sync这次我们也通过设置来强制调用async:false