从具体的DIV在文本文件中使用AJAX加载文本 [英] Load text from specific div in text file using ajax

问题描述

我使用的是的jQuery插件hovercard 从一个文本文件中使用AJAX时，在文本中拉用户将鼠标悬停在一个特定的文本字符串 - 这一切的伟大工程，（$ C $低于C）

现在我想要做的是有一个数字的文本文件中不同的div，（如下图所示），并拉动了相关之一，具体取决于哪个文本字符串上空盘旋。这可能与jQuery /阿贾克斯，如果是，你是怎么做到这一点吗？

//文本文件的内容的

 ＆LT; D​​IV ID =John_Resig＆GT;
＆LT; D​​IV CLASS =接触与GT;约翰Resig的＆LT; / DIV＆GT;
＆LT; P＆GT;＆LT;强＆GT;测试测试测试＆LT;！/ STRONG＆GT;＆LT; / P＆GT;
＆LT; p＆gt;和对文字的另一行：）＆LT; / P＆GT;
＆LT; / DIV＆GT;

＆LT; D​​IV ID =Tim_Berners_Lee＆GT;
＆LT; D​​IV CLASS =接触与GT;蒂姆·伯纳斯 - 李LT; / DIV＆GT;
＆LT; P＆GT;＆LT;强＆GT;测试测试测试＆LT;！/ STRONG＆GT;＆LT; / P＆GT;
＆LT; p＆gt;和对文字的另一行：）＆LT; / P＆GT;
＆LT; / DIV＆GT;
 

// jQuery的/阿贾克斯code 的

  $（文件）。就绪（函数（）{
VAR hoverHTMLDemoAjax ='＆LT; D​​IV CLASS =演示-CB-鸣叫＆GT;＆LT; / DIV＆GT;';
$（演示AJAX）。hovercard（{
    detailsHTML：hoverHTMLDemoAjax，
    宽度：350，
    延迟：500，
    cardImgSrc：http://ejohn.org/files/short.sm.jpg，
    onHoverIn：函数（）{
        $阿贾克斯（{
            网址：helloworld.txt
            键入：GET，
            数据类型：文本，
            beforeSend：函数（）{
                $（试玩-CB-鸣叫。）prePEND。（'＆LT; P类=加载文本＆GT;加载最新的鸣叫......＆LT; / P＆GT;'）;
            }，
            成功：功能（数据）{
                $（演示-CB-鸣叫）空（）;
                $（试玩-CB-鸣叫。）HTML（数据）。
            }，
            完成：函数（）{
                $（'。加载文本），删除（）。
            }
        }）;
    }
}）;
}）;
 

解决方案

由于您的文本文件中包含HTML标记，你可以操纵然后使用jQuery。

 成功：功能（数据）{
    变种人= $（数据），
        约翰= people.filter（'＃John_Resig'）;

    $（试玩-CB-鸣叫。）空（）追加（约翰）。
}
 

结束语HTML字符串中jQuery对象把它变成一个jQuery对象，你就可以使用，插入到DOM，即： $（'＆LT; D​​IV＆GT;测试＆LT; / DIV＆GT; ）.addClass（测试类）appendTo（'身体'）;

编辑：拉出名称：

您可以以同样的方式拉出的名字从你的文本文件。例如，在页面加载，如果你不得不将初始化所有时代的文本文件Ajax调用。下面code就会把你的文本文件，循环每个容器元素（在你的榜样，John_Resig和Tim_Berners_Lee）：

 成功：功能（数据）{
    变种人= $（数据）;

    people.each（功能（我，人）{
        变种的名字;
        如果（person.nodeType！== 3）{//你的文本文件，例如有包含div元素之间的空行......它加载为3的节点类型，所以我们会想跳过这些。
            NAME = $（'接触'，人）的.text（）; //这将抓住与类联系的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).

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?

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

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

解决方案

Since your text files contains html markup, you can manipulate then using 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');

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):

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

        }
    });
}

这篇关于从具体的DIV在文本文件中使用AJAX加载文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！