Question

我想在我的网页上显示Twitter用户信息。我创建了一个div标签，它将包含使用jquery的用户信息。我希望在光标位于此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>');

}

我做错了什么？有人可以帮助我吗？

Answer 1

注意：在实际代码中没有拼写错误（图片代码没有提前关闭），但在您关注的代码中，有一个拼写错误，正如Stian指出的那样。

Longshot ..图像是否可用？你可以使用这个插件：

https://github.com/desandro/imagesloaded

..然后在知道图像在DOM中之后更改HTML。

Answer 2

如果代码按照您的说法运行（我无法看到您将鼠标调用到方法的位置）并且它只是未显示的图像。

使用网络调试程序检查任何404错误，例如http://www.fiddler2.com/fiddler2/甚至是浏览器的F12网络调试器。

确保您的图片路径正确无误。

<强>更新

好的，现在我们知道它有效。请尝试以下操作：将一个类添加到#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>');
    });
}

Answer 3

您的问题并不能完全解释您的目标。但是，我至少可以解释为什么你的图像没有显示。

首先，您需要从 function UserMouseOver(o) 中调用 $('#personPopupContainer').mouseover(function () {. . .} 。编码它的方式， UserMouseOver(o) 将永远不会被调用，并且函数中的任何逻辑都不会被执行。

其次，在 $('#personPopupContainer').mouseout(function () {. . .} 中，行 container.css('display', 'none') 隐藏了整个container对象（所有你的HTML！）在mouseout上。这将导致您的“加载”GIF永不显示，因为您尝试显示的div （personPopupContent）位于 container 对象中您只需设置为 display: none ！ 您应该仅在您要隐藏的特定元素上将显示设置为none;例如，您可以将 id="balloon_tail" 添加到气球图像中，并将Javascript行更改为 $('#balloon_tail).css('display', 'none')。

第三，您将收到错误 var Settings = obj.attr('rel').split(','); ，因为您的最外层未包含 rel 属性元素 personPopupContainer。 您需要将以逗号分隔的字符串的 rel 属性添加到此元素，才能使此行生效。（但是，根据W3C，使用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");

但那只是我。

我希望这有帮助！

jquery html函数不起作用

3 个答案: