Question

当用户将鼠标悬停在特定文本字符串上时，我正在使用jquery hovercard plugin使用ajax从文本文件中提取文本 - 这一切都很有效，（下面的代码）。

现在我想要做的是在文本文件中有许多不同的div（如下所示），并根据悬停在哪个文本字符串上拉相关的div。这可能与Jquery / Ajax有关，如果是的话，你怎么做呢？

//文本文件内容

<div id="John_Resig">
<div class="contact">John Resig</div>
<p><strong>Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>

<div id="Tim_Berners_Lee">
<div class="contact">Tim Berners-Lee</div>
<p><strong>Testing testing testing!</strong></p>
<p>And on another line of text : )</p>
</div>

// Jquery / Ajax代码

$(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();
            }
        });
    }
}); 
});

Answer 1

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

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

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

在jQuery对象中包装一串html会将其转换为jQuery对象，然后您可以使用该对象并将其插入到dom中，即：$('<div>Test</div>').addClass('test-class').appendTo('body');

编辑：拔出名字：

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

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...

        }
    });
}

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

1 个答案: