0

当管理员鼠标悬停在用户名链接上时，我想显示用户个人资料。如果这是第一次，则会显示用户个人资料；那么下次 ajax 不应该触发并在没有 ajax 触发的情况下显示用户配置文件。

4

3 回答 3

0

假设您使用的是 jQuery，请将悬停事件绑定到用户名链接。如此：

$('.username').hover(function (e) {
    console.log("i'm hovering!! on id: "+$(this).attr('data-user-id')); //See the next step for where this came from
}

接下来，将用户的 id 添加到用户名元素中，可能在数据属性中：

<span class="username" data-user-id="1234567890">Username</span>

接下来，记录哪些用户已经被加载，可能是通过 id。当您获取新内容时，将其添加到对象中。我喜欢把这样的物体放在窗户上。

window.loadedUserInfo = {};

悬停时检查此对象中是否存在 userId 键。如果是，请使用它。如果没有，请使用 ajax 调用来获取它：

$.ajax({
   url : "path/to/userinfo"+userid,   //I'm assuming you're using restful endpoints
   type : "GET",
   success : function (res) {
      window.loadedUserInfo[userid] = res;
      //Format your popover with the info
   },
   error: function (jqxhr) {
      //something went wrong
   }
})

至于弹出框本身，您可能可以使用引导弹出框。

把它们放在一起：

$(".username").hover(function (e) {
        console.log("i'm hovering!! on id: "+$(this).attr("data-user-id")); //See the next step for where this came from
    if (typeof window.loadUserInfo[$(this).attr("data-user-id")] == 'undefined') {
      $.ajax({
         url : "path/to/userinfo"+userid,   //I'm assuming you're using restful endpoints
         type : "GET",
         success : function (res) {
            window.loadedUserInfo[userid] = res;
            //Format your popover with the info
         },
         error: function (jqxhr) {
            //something went wrong
         }
      })
    } else {
       //populate popover with info in window.loadUserInfo[$(this).attr('data-user-id')]
    }
 }
于 2013-03-06T18:44:10.343 回答
0

要逐步实现该功能：

  1. 在用户名的鼠标悬停时，实现一个 ajax 调用，在用户名附近的 html 中呈现用户配置文件
  2. 通过 javascript，实现这样的功能，当用户离开用户名/用户配置文件时，用户配置文件 div 现在被隐藏
  3. 在上面的 #1 中进行 ajax 调用时，检查 div 是否已经存在，其中包含您尝试请求的用户 ID 的用户配置文件。这可以通过id在用户配置文件部分中添加一些并检查该#user_profile_#{id}div 是否存在来轻松实现。

您的要求太宽泛，无法提供任何代码...如果您在实施上述任何部分时遇到问题，请将它们分别作为问题一一发布..

于 2013-03-06T18:44:46.140 回答
0

您需要知道用户名链接的 id 和类。

您可以让 jQuery 监听悬停，当该事件发生时，您可以调用将执行 ajax 的函数。

但是，您需要知道用户的 id，最好的方法是执行类似的操作

<a href='user123.php' class='userHref' id='user_123'>I want to be hovered</a>

现在你有一个链接可以悬停在上面。

$('.userHref').live("hover", function()
{
    var userHrefId = $(this).attr('id');
    var userHrefIdSplit = userHrefId .split('_');
    var userId = userHrefIdSplit[1];
    useAjax(userId);
});

现在您已经通过监听类 userHref 的链接上的任何悬停来监听悬停，jquery 通过获取 a 元素的 id 来响应，将 id 分成 2 个单独的项目，其中第二个表示用户 Id。

现在我们还调用了 useAjax 函数并发送了用户的 id。现在您可以将 userId 发布到已知的后端站点（在您的示例中为 rails），它将查询数据库并将 url 返回给用户图像。然后，我们只需要知道您希望图像出现在其中的 div 元素的 id。

function useAjax(userId);
{
    var id = userId;
    var select = true;
    var url = '../scripts/ajax.php';

    $.ajax(
    {
        // Post select to url.
        type : 'post',
        url : url,
        dataType : 'json', // expected returned data format.
        data : 
        {
                'select' : select, // the variable you're posting.
                'userId' : id
        },
        success : function(data)
        {
            // This happens AFTER the backend has returned an JSON array
            var userUrl, userImg, message;

            for(var i = 0; i < data.length; i++)
            {
                // Parse through the JSON array which was returned.
                // A proper error handling should be added here (check if
                // everything went successful or not)

                userUrl = data[i].userUrl;
                message = data[i].message;
                userImg = "<img src='"+userUrl+"' alt='' title='' />";
                $('#someDiv').html(userImg); // Here's your image.
            }
        },
        complete : function(data)
        {
            // do something, not critical.
        }
    });
}

我不熟悉rails，但您可能可以像我在这里解释的那样以类似的方式对后端进行编程：Javascript function as php?

搜索我的答案，它应该给你一个非常详细的例子。

我希望这有帮助。

未来提示：先尝试 google :)

于 2013-03-06T18:38:52.557 回答