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

I'm using the jquery hovercard plugin to pull in text from a text file using ajax when a user hovers over a particular text string - this all works great, (code below).

我使用jquery hovercard插件在用户悬停在一个特定的文本字符串上时，使用ajax从文本文件中提取文本——这一切都很棒，(代码如下)。

Now what I would like to do is have a number of different divs inside the text file, (shown below), and pull in the relevant one depending on which text string is hovered over. Is this possible with Jquery/Ajax, and if yes, how do you do it please?

现在我想要做的是在文本文件中有许多不同的div(如下所示)，并根据哪个文本字符串被悬空而提取相应的div。Jquery/Ajax能做到这一点吗?

//Text File Contents

/ /文本文件的内容

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

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

1 个解决方案

#1

Since your text files contains html markup, you can manipulate then using jQuery.

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

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

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

Wrapping a string of html in a jQuery object turns it into a jQuery object that you can then use and insert into the dom, ie: $('<div>Test</div>').addClass('test-class').appendTo('body');

将html字符串封装到jQuery对象中，将其转换为jQuery对象，然后您可以使用该对象并将其插入到dom中，例如:$('

Test

').addClass(' Test -class').appendTo('body');

EDIT: Pulling out names:

编辑:退出的名字:

You can pull out names from your text file in the same manner. For example, on page load if you had an ajax call to the text file that would initialize all the times. The following code would take your text file, and loop over each container element (in your example, John_Resig and Tim_Berners_Lee):

您可以以同样的方式从文本文件中提取名称。例如，在页面加载中，如果您对文本文件进行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...

        }
    });
}

#1