当管理员鼠标悬停在用户名链接上时，我想显示用户个人资料。如果这是第一次，则会显示用户个人资料；那么下次 ajax 不应该触发并在没有 ajax 触发的情况下显示用户配置文件。
【问题讨论】：
标签： javascript ruby-on-rails ajax ruby-on-rails-3 jquery
要逐步实现该功能：
id 并检查 #user_profile_#{id} div 是否存在来轻松实现。您的要求太宽泛，无法提供任何代码... 如果您在执行上述任何部分时遇到问题，请将它们作为问题单独发布..
【讨论】：
你需要知道用户名链接的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 个单独的项目，其中第二个表示用户身份证。
现在我们还调用了 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 :)
【讨论】：
假设您使用的是 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')]
}
}
【讨论】：