Question

我正在使用jquery hovercard插件在用户将鼠标悬停在特定文本字符串上时使用ajax从文本文件中提取文本 - 这一切都很有用。

我添加了在页面加载时搜索内容的功能，并将label类添加到任何匹配的名称 - 这在定义名称时效果很好。

在previous question的帮助下; （非常感谢@Alex Klock），我已经得到它，以便在悬停时只从文本文件中提取一个div的text / html - 在定义名称时效果很好。

我现在需要做的是将它们全部拉到一起并使其动态化，以便在页面加载时将所有名称从文本文件中拉出，将正确的label类添加到相关名称/ s中，然后在悬停时显示正确/对应的text / html。

任何帮助都将受到大力赞赏：）

// HTML code

<div id="content">
<p>jQuery by John Resig is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most visited websites, it's the most popular JavaScript library in use today Tim Berners-Lee.</p>                                  
<p>jQuery is free, Tim Berners-Lee open source software, dual-licensed under the MIT License and GNU General Public License, Tim Berners-Lee Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and John Resig develop Ajax applications.</p>
</div>

// Jquery代码

//based on Highlight words in text with jQuery by (http://www.gotoquiz.com/web-coding/programming/javascript/highlight-words-in-text-with-jquery/)
jQuery.fn.addhover = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<label class=\"" + className + "\" style=\"color:#932121;\">" + match + "</label>";
            });
        });
    });
};

$(document).ready(function () {                         

var HTML_FILE_URL = 'helloworld.txt';

$.get(HTML_FILE_URL, function(data) {
    var fileDom = $(data);
    fileDom.filter('.contact').each(function() {
        var savename = $(this).closest(".contact").attr("id");
    });
});

$("#content *").addhover("John Resig", "demo-ajax");

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) {
                var people = $(data),
                john = people.filter('#John_Resig');                        
                $(".demo-cb-tweets").empty().append(john);
            },
            complete: function () {
                $('.loading-text').remove();
            }
        });
    }
}); 
});

// Helloworld.txt文件内容

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

Answer 1

这是我的解决方案：

对于您的JavaScript代码：

jQuery.fn.addhover = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<label class=\"" + className + "\" style=\"color:#932121;\">" + match + "</label>";
            });
        });
    });
};

$(function() {
    var HTML_FILE_URL = 'helloworld.txt';

    $.get(HTML_FILE_URL, function(data) {
        var fileDom = $(data);
        fileDom.filter('.contact').each(function() {
            var savename = $(this).closest(".contact").attr("id");
            var hovername = savename.replace(/_/g, ' ');

            $("#content *").addhover(hovername, "demo-ajax");
            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 : HTML_FILE_URL,
                        type: 'GET',
                        dataType: "text",
                        beforeSend: function () {
                            $(".demo-cb-tweets").prepend('<p class="loading-text">Loading latest tweets...</p>');
                        },
                        success: function (data) {
                            var people = $(data),
                            name = people.filter('#' + savename);
                            $(".demo-cb-tweets").empty().append(name);
                        },
                        complete: function () {
                            $('.loading-text').remove();
                        }
                    });
                }
            });


        });
    });


});

在您的文本文件中，我将Tim_Berners_Lee更改为Tim_Berners-Lee。这是为了简化ID的解析，以便轻松地将其转换为相应的名称：

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

希望这会有所帮助：）

Answer 2

我设法得到working model，至少只发出ajax请求。它仍然感觉很脏。如果你愿意的话，我可以更多地调整它。

//based on Highlight words in text with jQuery by (http://www.gotoquiz.com/web-coding/programming/javascript/highlight-words-in-text-with-jquery/)
jQuery.fn.addhover = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<label class=\"" + className + "\" style=\"color:#932121;\" data=\"" + match.replace(' ','_') + "\">" + match + "</label>";
            });
        });
    });
};

$(document).ready(function () {
    var HTML_FILE_URL = 'helloworld.txt';
    var cards={};
    var hoverHTMLDemoAjax = '<div class="demo-cb-tweets"></div>';

    $.get(HTML_FILE_URL, function (data) {
        cards=$(data);
        cards.each(function() {
            if(!this.id)return;
            $("#content *").addhover(this.id.replace('_',' '), 'demo-ajax');
        });
        $(".demo-ajax").hovercard({
            detailsHTML: hoverHTMLDemoAjax,
            width: 350,
            delay: 500,
            cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
            onHoverIn: function () {
                $(".demo-cb-tweets").empty().append(cards.filter('#'+$(this).children().eq(0).attr('data')));
            }
        });
    }); 
});

你需要第一个ajax请求，让它根据你文件中实际找到的id动态地工作。

在同一个文件上执行后续的ajax请求以获取实际数据，感觉就像设计非常糟糕。

我建议您制作两个服务器端文件（或一个处理这两个请求的文件）：

getTypes =＆gt;返回将在后续ajax请求中使用的id，以获取实际数据（如果尚未加载）
getData / for / * =＆gt;其中*是数据的实际标识符（例如：Tim_Berners_Lee）。完成此类请求后，可以对其进行缓存和重复使用。

上面设计的方法类似于web service特别是RPC样式的网络服务之一。

请注意，根据您尝试实现的目标，可能存在其他更优化的解决方案。正如我在评论中提到的，如果您使用此技术填充最新推文。没有必要从您的服务器上退回该请求。 You can pull it directly from the twitter api！

使用文本文件中的数据动态悬停详细信息

2 个答案: