Jquery 使用ajax从文本文件中的特定div加载文本

当用户将鼠标悬停在特定的文本字符串上时，我使用从文本文件中提取文本，这一切都很好（代码如下）

现在我想做的是在文本文件中有许多不同的div（如下所示），并根据悬停在哪个文本字符串上拉入相关的div。Jquery/Ajax可以做到这一点吗？如果可以，请怎么做

//文本文件内容

作者
测试

在另一行文字上：）

蒂姆·伯纳斯-李
测试

在另一行文字上：）

//Jquery/Ajax代码

$（文档）.ready（函数（）{
var hoverHTMLDemoAjax=''；
$（“.demo ajax”）.hovercard({
detailsHTML:hoverHTMLDemoAjax，
宽度：350，
延误：500，
cardImgSrc:'http://ejohn.org/files/short.sm.jpg',
onHoverIn:函数（）{
$.ajax({
url:“helloworld.txt”，
键入：“GET”，
数据类型：“文本”，
beforeSend:函数（）{
$（“.demo cb tweets”）.prepend（“
加载最新tweets…
”）；
},
成功：功能（数据）{
$（“.demo cb tweets”）.empty（）；
$（“.demo cb tweets”）.html（数据）；
},
完成：函数（）{
$（'.loading text'）.remove（）；
}
});
}
}); 
});

由于文本文件包含html标记，因此可以使用jQuery对其进行操作

success: function (data) {
    var people = $(data),
        john = people.filter('#John_Resig');

    $(".demo-cb-tweets").empty().append(john);
}

在jQuery对象中包装html字符串会将其转换为jQuery对象，然后可以使用该对象并将其插入dom，即：

$（'Test'）.addClass（'Test-class'）.appendTo（'body'）

编辑：提取名称：

您可以用同样的方式从文本文件中提取名称。例如，在页面加载时，如果您对文本文件有一个ajax调用，该调用将一直进行初始化。以下代码将获取您的文本文件，并在每个容器元素上循环（在您的示例中，John_Resig和Tim_Berners_Lee）：

（）非常适合……谢谢Alex；我尝试了你的代码，但无法使其工作。最后得到的结果是-
var-ndat=$（数据）.filter（“#John_Resig”）；$（“.demo cb tweets”）.html（ndat）现在我只需要让它从文本文件中取出名称，并根据悬停在上面的名称分配它们…干杯-它工作了！我认为您不知道如何使其成为“动态”的，因此它首先从文本文件中提取名称，然后根据您悬停的名称添加正确的名称？只是编辑并添加了如何使用jQuery提取名称的示例。：）非常感谢你！如果我要在单独的函数中提取页面加载上的名称，我将如何在.hovercard success函数中访问它们？
$(document).ready(function () {
var hoverHTMLDemoAjax = '<div class="demo-cb-tweets"></div>';
$(".demo-ajax").hovercard({
    detailsHTML: hoverHTMLDemoAjax,
    width: 350,
    delay: 500,
    cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
    onHoverIn: function () {
        $.ajax({
            url : "helloworld.txt",
            type: 'GET',
            dataType: "text",
            beforeSend: function () {
                $(".demo-cb-tweets").prepend('<p class="loading-text">Loading latest tweets...</p>');
            },
            success: function (data) {
                $(".demo-cb-tweets").empty();
                $(".demo-cb-tweets").html(data);
            },
            complete: function () {
                $('.loading-text').remove();
            }
        });
    }
}); 
});

success: function (data) {
    var people = $(data),
        john = people.filter('#John_Resig');

    $(".demo-cb-tweets").empty().append(john);
}

success: function (data) {
    var people = $(data);

    people.each(function (i, person) {
        var name;
        if (person.nodeType !== 3) { // Your text file example had a blank line between the containing div elements... which loads as a nodeType of 3, so we'll want to skip those.
            name = $('.contact', person).text(); // This would grab the text inside of the div with the class 'contact'.
            // do stuff with that name here...

        }
    });
}