javascript - jquery html函数不起作用

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

如果代码按您所说的那样工作（我看不到您在哪里调用鼠标悬停方法）并且它只是没有显示的图像。

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

确保您的图像路径正确。

更新

好的，现在我们知道它有效。尝试以下操作：向 #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！）。这将导致您的“加载” gif 永远不会显示，因为您尝试显示的 div ( personPopupContent)位于 container 您刚刚设置的对象中 display: 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");

但这只是我。

我希望这有帮助！