jquery - ツールチップに画像を表示する

Question

私はほろ酔いプラグインを使用しています

---

---

誰かが自分のリンクをホバーした場合にユーザーの画像を表示したい.今、リンクには画像がサーバーに保存される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は決して来ません_私は<id>.jpgとして src を持つ img

また、もう1つ気になったのは……エラーがないときのシーケンスは次のとおりです。

1. alert(++i + "最初");

2. alert(++i + "最後");

   エラーがあった場合のシーケンスは次のとおりです。

   1. alert(++i + "最初");
   2. alert(++i + "最後");
   3. alert(++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