-1

Web ページに Twitter のユーザー情報を表示しようとしています。jqueryを使用してユーザー情報を含むdivタグを作成しました。カーソルがこの div タグの上にあるときにユーザー情報を表示したい。以下はjqueryの私のコードです：

var hideDelay = 500;
var currentID;
var hideTimer = null;
var container;

$(function () {
    container = $('<div id="personPopupContainer" style=\"max-width:400px;\">'
    + '<table border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
    + '<tr>'
    + '   <td class="corner topLeft"><div style="position:absolute;top:15px;left:-16px;"><img src="images/balloon_tail.png" /></div></td>'
    + '   <td class="top"></td>'
    + '   <td class="corner topRight"></td>'
    + '</tr>'
    + '<tr>'
    + '   <td class="left"></td>'
    + '   <td><div id="personPopupContent"></div></td>'   //the div tag is here
    + '   <td class="right"></td>'
    + '</tr>'
    + '<tr>'
    + '   <td class="corner bottomLeft">&nbsp;</td>'
    + '   <td class="bottom"></td>'
    + '   <td class="corner bottomRight"></td>'
    + '</tr>'
    + '</table>'
    + '</div>');
    $('body').append(container);

    $('#personPopupContainer').mouseover(function () {
        if (hideTimer)
            clearTimeout(hideTimer);
    });

    $('#personPopupContainer').mouseout(function () {
        if (hideTimer)
            clearTimeout(hideTimer);
        hideTimer = setTimeout(function () {
            container.css('display', 'none');
        }, hideDelay);
    });
});

それはうまくいっています。しかし、以下のコードは

$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

動作していません。

function UserMouseOver(o) {

    var obj = $("#" + o);

        var Settings = obj.attr('rel').split(',');

        var UserID = Settings[0];
        var ScreenName = Settings[1];
        if (hideTimer)
            clearTimeout(hideTimer);

        var pos = obj.offset();
        var width = obj.width();
        if (pos != null && width != null) {
            container.css({
                left: (pos.left + width) + 20 + 'px',
                top: pos.top - 23 + 'px'
            });
        }
        $('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

}

私は何を間違っていますか？誰か助けてくれませんか？

4

3 に答える 3

0

あなたが述べたようにコードが機能している場合（マウスオーバーメソッドを呼び出している場所がわかりません）、表示されていないのは画像だけです。

http://www.fiddler2.com/fiddler2/またはブラウザの F12 Web デバッガなど、Web デバッガを使用して 404 エラーをチェックします。

画像へのパスが正しいことを確認してください。

アップデート

さて、これで機能することがわかりました。次のことを試してください: #personPopupContent に class="popupContent" などのクラスを追加します。html を設定したコード行を変更して、ID セレクターではなくクラス セレクターを呼び出します。次に、jQuery がコンテンツを追加する html 要素を取得していることを確認するために、そこにテキストを追加します。

  //All  the other code
   + '   <td><div id="personPopupContent" class="popupContent"></div></td>'
  //All  the other code

UserMouseOver() メソッドのセレクターを変更します。

$('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');

確認してください

どこで UserMouseOver() メソッドを呼び出しているのかわからないので、jquery の周りに Document Ready を追加してください。

function UserMouseOver(o) {

    //All the other code

    $(function () {
        $('.popupContent').html('<center><img src="images/loading_sm.gif" /></center>');
    });
}
于 2013-03-06T15:42:09.580 に答える
0

あなたの質問は、あなたがやろうとしていることを完全には説明していません。ただし、少なくとも画像が表示されない理由を説明することはできます。

function UserMouseOver(o) まず、 from inside を呼び出す必要があります$('#personPopupContainer').mouseover(function () {. . .}。あなたがそれをコーディングした方法では、 UserMouseOver(o) 呼び出されることはなく、関数内のロジックは実行されません。

第二に、あなた $('#personPopupContainer').mouseout(function () {. . .}の行 container.css('display', 'none') は、マウスアウト時にオブジェクト全体container(すべての HTML!) を隠しています。表示しようとしている div ( personPopupContent)が、設定したばかりのオブジェクト内に存在するため、「読み込み中」の gif が表示されなくなり ます。非表示にしようとしている特定の要素でのみ表示を none に設定する必要があります。たとえば、バルーン イメージに追加して、Javascript 行を に変更できます。container display: none id="balloon_tail" $('#balloon_tail).css('display', 'none')

第 3 に、最も外側の要素に属性をvar Settings = obj.attr('rel').split(','); 含めていないため 、行にエラーが表示されます。 この行を機能させるには、コンマ区切りの文字列の属性をこの要素に追加する必要があります。(ただし、W3C によれば、この属性を使用する唯一の公式要素は、アンカー タグです。)rel personPopupContainer rel rel <a>

最後に、イメージ タグを に追加して、 の #personPopupContent ようにし <div id="personPopupContent"><img src="" id="loading_sm" /></div>ます。 その後、変更できます

$('#personPopupContent').html('<center><img src="images/loading_sm.gif" /></center>');

に

$('#loading_sm').attr("src", "images/loading_sm.gif");

しかし、それは私だけです。

これが役立つことを願っています！

于 2013-03-06T17:55:32.740 に答える
0

注：実際のコードにはタイプミスはありません（画像タグが早期に閉じられていません）が、Stianが指摘しているように、注目しているコードにはタイプミスがあります。

ロングショット..画像は利用可能ですか? このプラグインを使用できます：

https://github.com/desandro/imagesloaded

..次に、画像が DOM にあることがわかったら、HTML を変更します。

于 2013-03-06T15:34:14.157 に答える